1

I'm embedding YouTube videos on product pages using a lazy loading script to speed up the page load when videos are embedded. Here's the lazy load script that is in the header.php of the site:

<script type="text/javascript">
        /**
        Defer parsing of Javascript for any YouTube videos found on a given page.
        Relies on using YouTube iframe embed and changing src= to data-src=
        Source: https://scottdeluzio.com/defer-parsing-javascript-youtube-videos/
        **/
        function init() {
            var vidDefer = document.getElementsByTagName('iframe');
            for (var i=0; i<vidDefer.length; i++) {
                if(vidDefer[i].getAttribute('data-src')) {
                    vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
                } 
            } 
        }
        window.onload = init;
    </script>

Here's the youtube embed iframe code:

<iframe width="319" height="179" data-src="//www.youtube.com/embed/SKT9G8_hB4E" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Here's the page the video is embedded on:

https://www.intechrahealth.com/product/fenfast-375/

However, when I load the page on any smartphone device and scroll to a point where the video is out of the viewport, and then I scroll back to see the video, a blank spot exists where the video used to be. I can get the video to reappear when I reload the page, but scrolling again makes it disappear.

I've tried removing the "allow=" parameters, but that doesn't fix it. I've also removed the lazy load code and changed "data-src" back to "src", and the videos work normal, but the overall page speed then becomes 15 seconds or so. I need the lazy load code to speed up the page load when videos are present.

Is this the lazy load code's fault? Or is it something else?

rw-intechra
  • 197
  • 1
  • 14
  • Any reason why you loading iframe via JS ? You can simple add iframe to your html – Always Helping Jun 12 '20 at 01:39
  • @UsmanMunir Loading videos is an expensive operation. The way he's doing it helps defer the actual loading of the video to reduce page load times. – maiorano84 Jun 12 '20 at 01:50
  • 1
    To answer your question directly, yes, I believe your problem has to do with your lazy load implementation and how mobile browsers handle below-the-fold content like iframes and images. When those types of assets are scrolled out of view, they are typically hidden to help improve page speeds. When scrolling back into view, your Javascript doesn't re-execute, so nothing is ever rendered back into place. To avoid this, try using the [Youtube Javascript API](https://developers.google.com/youtube/iframe_api_reference) to handle your loading and rendering. – maiorano84 Jun 12 '20 at 01:56
  • I'm not sure where to begin with using the Youtube Javascript API. Any tips would be greatly appreciated and upvoted. Or, what if I used the jQuery code in this question/answer (https://stackoverflow.com/questions/24338004/run-javascript-function-when-div-is-scrolled-to) and used it to run window.onload = init; each time the video embed area scrolls into view? – rw-intechra Jun 12 '20 at 19:55

0 Answers0