Hello I'm displaying a youtube video in a div full screen. It change size on resize window and the most important thing it load on demand and play/pause if it's on the viewport or not.
To control the viewport and lazy loading I'm using viewportchecker So, ViewportChecker check if the DIV is in the viewport, if YES it start the funcion playPause1, the function will start the video or pause it in case the video is already being played.
$('#Wraptv1').viewportChecker({
callbackFunction: playPause1,
offset: 300,
repeat: true,
});
Everything works very good but sometimes the video is not respecting the startSeconds parameter mostly if the page is loaded when the video DIV is outside the viewport. In this case the first video should start in the second 30 (as tou can see below in the video parameters) but it starts from the second 0.
video parameters:
var ystv1 = [{
'videoId': 'Gc2en3nHxA4',
'startSeconds': 30,
'endSeconds': 45,
'suggestedQuality': 'hd720'
},{
'videoId': 'Gc2en3nHxA4',
'startSeconds': 65,
'endSeconds': 90,
'suggestedQuality': 'hd720'
}, ],
Here the code example: https://codepen.io/ysanmiguel/pen/WEGwqO
any help or suggestion to fix this problem or improve the code? thank you very much.