lazyload youtube vids

In this example below you will see how to do a lazyload youtube vids with some HTML / CSS and Javascript

lazy loading videos for lightbox play in a carousel with multiple videos

Thumbnail
This awesome code was written by 1bladesforhire, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 1bladesforhire ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>lazyload youtube vids</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <section data-grid="container stack-2" class="m-multi-feature f-align-center" id="m-multi-tiles">
    <section data-grid="container">
        <ul role="tablist">
            <li class="c-glyph" role="presentation">
                    <a href="#" role="tab" class="c-logo" itemprop="url" aria-label="Item 13" aria-controls="newIconItemImage13 newIconItemContent13">
    <span>Skyworld</span>
                    </a>
                </li>
            <li class="c-glyph" role="presentation">
                    <a href="#" role="tab" class="c-logo " itemprop="url" aria-label="Item 11" aria-controls="newIconItemImage11 newIconItemContent11">
                   
                    <span>SteamVR</span>
                </a>
            </li>
            <li class="c-glyph" role="presentation">
                <a href="#" role="tab" class="c-logo " itemprop="url" aria-label="Item 12" aria-controls="newIconItemImage12 newIconItemContent12">
                    
                    <span>SUPERHOT VR</span>
                </a>
            </li>           
            <li class="c-glyph" role="presentation">
                <a href="#" role="tab" class="c-logo" itemprop="url" aria-label="Item 14" aria-controls="newIconItemImage14 newIconItemContent14">
                    
                    <span>Free the Night</span>
                </a>
            </li>
            <li class="c-glyph" role="presentation">
                <a href="#" role="tab" class="c-logo" itemprop="url" aria-label="Item 15" aria-controls="newIconItemImage15 newIconItemContent15">
                   
                    <span>Minecraft</span>
                </a>
            </li>
        </ul>
        <ul id="m-multi-description">
            <li id="newIconItemContent13" role="tabpanel" class="f-active">
                <h4 class="c-heading-10">VERTIGO GAMES</h4>
                    <h3 class="c-heading">Skyworld</h3>
                    <p class="c-paragraph">Manage your economy, build and lead royal armies, rule dragons to restore your kingdom to glory. Battle the forces of evil as you conquer and reunite all Skyworlds in this turn-based strategy game that brings the beloved gameplay of strategy classics to VR.</p>
                </li>
            <li id="newIconItemContent11" role="tabpanel" >
                <!-- <h4 class="c-heading-10">Microsoft</h4> -->
                <h3 class="c-heading">Steam®VR</h3>
                <p class="c-paragraph">Dive into many of the most popular VR games available today. Experience more than 2,000 titles from the Steam®VR library on Windows Mixed Reality.<sup>11</sup></p>
            </li>
            <li id="newIconItemContent12" role="tabpanel">
                <h4 class="c-heading-10">SUPERHOT TEAM</h4>
                <h3 class="c-heading">SUPERHOT VR</h3>
                <p>
                The iconic VR FPS is here; time moves only when you do.
                </p>
            </li>
           
            <li id="newIconItemContent14" role="tabpanel">
                <h4 class="c-heading-10">JAUNT</h4>   
                <h3 class="c-heading">Free the Night</h3>
                <p class="c-paragraph">A magical interactive VR journey that invites you to blow out city lights and return the stars back into the night sky.</p>
            </li>
            <li id="newIconItemContent15" role="tabpanel">
                <h4 class="c-heading-10">MICROSOFT</h4>
                <h3 class="c-heading">Minecraft</h3>
                <p class="c-paragraph">Get right inside the world of Minecraft with mixed reality. Build, explore and battle mobs - do all the things you know and love - but from a fresh perspective.</p>
            </li>
        </ul>
        <div class="c-carousel f-multi-slide" role="region" aria-label="Images">
            <div class="background-skew"></div>
            <div itemscope itemtype="http://schema.org/ItemList">
                <ul>
                    <li id="newIconItemImage13" data-f-theme="dark" role="tabpanel" class="f-active">
                            <picture class="c-image">
                                <source srcset="assets/video/skyworld.jpg" media="(min-width: 1779px)">
                                <source srcset="assets/video/skyworld.jpg" media="(min-width:1400px)">
                                <source srcset="assets/video/skyworld.jpg" media="(min-width:1084px)">
                                <source srcset="assets/video/skyworld.jpg" media="(min-width:768px)">
                                <source srcset="assets/video/skyworld.jpg" media="(min-width:540px)">
                                <source srcset="assets/video/skyworld.jpg" media="(min-width:0)">
                                <img srcset="assets/video/skyworld.jpg" src="assets/video/skyworld.jpg" alt="Placeholder with grey background and dimension watermark without any imagery">
                            </picture>
                            <a class="c-glyph glyph-play playme" onclick="revealVideo('video3','youtube3')"></a>
                        </li>
                        <div id="video3" class="lightbox" onclick="hideVideo('video3','youtube3')">
                            <div class="lightbox-container">  
                                <div class="lightbox-content">
                                
                                    
                                    <div class="video-container  youtube-player" data-id="SN20mKCMEe8" youtube="youtube3">
                                        <!-- <iframe id="youtube3" width="960" height="540" src="https://www.youtube.com/embed/SN20mKCMEe8?showinfo=0" frameborder="0" allowfullscreen></iframe> -->
                                    </div>      
                                
                                </div>
                            </div>
                            <button onclick="hideVideo('video3','youtube3')" class="lightbox-close c-glyph glyph-cancel">
                                    </button>
                        </div>
                    <li id="newIconItemImage11" data-f-theme="light"  role="tabpanel">
                        <picture class="c-image">
                            <source srcset="assets/video/steam-vr-1600.jpg" media="(min-width: 1779px)">
                            <source srcset="assets/video/steam-vr-1600.jpg" media="(min-width:1400px)">
                            <source srcset="assets/video/steam-vr-1600.jpg" media="(min-width:1084px)">
                            <source srcset="assets/video/steam-vr-1600.jpg" media="(min-width:768px)">
                            <source srcset="assets/video/steam-vr-1600.jpg" media="(min-width:540px)">
                            <source srcset="assets/video/steam-vr-1600.jpg" media="(min-width:0)">
                            <img srcset="assets/video/steam-vr-1600.jpg" src="assets/video/steam-vr-1600.jpg" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                        <a class="c-glyph glyph-play playme" onclick="revealVideo('video','youtube')"></a>
                    </li>
                    <div id="video" class="lightbox" onclick="hideVideo('video','youtube')">
                            <div class="lightbox-container">  
                                <div class="lightbox-content">
                                
                                    
                                    <div class="video-container  youtube-player" data-id="dXOVk5SNBRU" youtube="youtube">
                                        <!-- <iframe id="youtube" width="960" height="540" src="https://www.youtube.com/embed/dXOVk5SNBRU?showinfo=0" frameborder="0" allowfullscreen></iframe> -->
                                    </div>      
                                
                                </div>
                            </div>
                            <button onclick="hideVideo('video','youtube')" class="lightbox-close c-glyph glyph-cancel">

                                    </button>
                        </div>
                    <li id="newIconItemImage12" data-f-theme="light"  role="tabpanel">
                        <picture class="c-image">
                            <source srcset="assets/video/superhot-1600.jpg" media="(min-width: 1779px)">
                            <source srcset="assets/video/superhot-1600.jpg" media="(min-width:1400px)">
                            <source srcset="assets/video/superhot-1600.jpg" media="(min-width:1084px)">
                            <source srcset="assets/video/superhot-1600.jpg" media="(min-width:768px)">
                            <source srcset="assets/video/superhot-1600.jpg" media="(min-width:540px)">
                            <source srcset="assets/video/superhot-1600.jpg" media="(min-width:0)">
                            <img srcset="assets/video/superhot-1600.jpg" src="assets/video/superhot-1600.jpg" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                            <a class="c-glyph glyph-play playme" onclick="revealVideo('video2','youtube2')"></a>
                    </li>
                    
                    <div id="video2" class="lightbox" onclick="hideVideo('video2','youtube2')">
                            <div class="lightbox-container">  
                                <div class="lightbox-content">
                                
                                    
                                    <div class="video-container  youtube-player" data-id="A1jothqmqHw" youtube="youtube2">
                                        <!-- <iframe id="youtube2" width="960" height="540" src="https://www.youtube.com/embed/A1jothqmqHw?showinfo=0" frameborder="0" allowfullscreen></iframe> -->
                                    </div>      
                                
                                </div>
                            </div>
                            <button onclick="hideVideo('video2','youtube2')" class="lightbox-close c-glyph glyph-cancel">

                                    </button>
                        </div>
                  
                    
                    <li id="newIconItemImage14" dat1a-f-theme="dark" role="tabpanel">
                    <picture class="c-image">
                        <source srcset="assets/video/free-the-night.jpg" media="(min-width: 1779px)">
                            <source srcset="assets/video/free-the-night.jpg" media="(min-width:1400px)">
                            <source srcset="assets/video/free-the-night.jpg" media="(min-width:1084px)">
                            <source srcset="assets/video/free-the-night.jpg" media="(min-width:768px)">
                            <source srcset="assets/video/free-the-night.jpg" media="(min-width:540px)">
                            <source srcset="assets/video/free-the-night.jpg" media="(min-width:0)">
                            <img srcset="assets/video/free-the-night.jpg" src="assets/video/free-the-night.jpg" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                        <a class="c-glyph glyph-play playme" onclick="revealVideo('video4','youtube4')"></a>
                    </li>
                    <div id="video4" class="lightbox" onclick="hideVideo('video4','youtube4')">
                        <div class="lightbox-container">  
                            <div class="lightbox-content">
                            
                                
                                <div class="video-container  youtube-player" data-id="tlKQJcH0mgY" youtube="youtube4">
                                    <!-- <iframe id="youtube4" width="960" height="540" src="https://www.youtube.com/embed/tlKQJcH0mgY?showinfo=0" frameborder="0" allowfullscreen></iframe> -->
                                </div>      
                            
                            </div>
                        </div>
                        <button onclick="hideVideo('video4','youtube4')" class="lightbox-close c-glyph glyph-cancel">
                                </button>
                    </div>
                    <li id="newIconItemImage15" dat1a-f-theme="dark" role="tabpanel">
                        <picture class="c-image">
                            <source srcset="assets/video/minecraft-thumb.jpg" media="(min-width: 1779px)">
                            <source srcset="assets/video/minecraft-thumb-1259.jpg" media="(min-width:1400px)">
                            <source srcset="assets/video/minecraft-thumb-1259.jpg" media="(min-width:1084px)">
                            <source srcset="assets/video/minecraft-thumb-1259.jpg" media="(min-width:768px)">
                            <source srcset="assets/video/minecraft-thumb-1259.jpg" media="(min-width:540px)">
                            <source srcset="assets/video/minecraft-thumb-1259.jpg" media="(min-width:0)">
                            <img srcset="assets/video/minecraft-thumb-1259.jpg" src="assets/video/minecraft-thumb-1259.jpg" alt="Placeholder with grey background and dimension watermark without any imagery">
                        </picture>
                        <a class="c-glyph glyph-play playme" onclick="revealVideo('video5','youtube5')"></a>
                    </li>
                    <div id="video5" class="lightbox" onclick="hideVideo('video5','youtube5')">
                        <div class="lightbox-container">  
                            <div class="lightbox-content">
                            

                                <div class="video-container  youtube-player" data-id="dXOVk5SNBRU" youtube="youtube5">
                                    <!-- <iframe id="youtube5" width="960" height="540" src="https://www.youtube.com/embed/dXOVk5SNBRU?showinfo=0" frameborder="0" allowfullscreen></iframe> -->
                                </div>      
                            
                            </div>
                        </div>
                        <button onclick="hideVideo('video5','youtube5')" class="lightbox-close c-glyph glyph-cancel">
                                </button>
                    </div>
                </ul>
            </div>
        </div>
    </section>
</section>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/1bladesforhire/lazyload-youtube-vids-eyGEar */
a.playme{
  height: 50px;
  width: 50px;
  background: blue;
  content: '#';
  display: block;
}

/*Downloaded from https://www.codeseek.co/1bladesforhire/lazyload-youtube-vids-eyGEar */
//lazy load youtube vids
document.addEventListener("DOMContentLoaded", function() {
  var div,
    n,
    v = document.getElementsByClassName("youtube-player");
  for (n = 0; n < v.length; n++) {
    var iframe = document.createElement("iframe");
    var embed = "https://www.youtube.com/embed/ID?showinfo=0";
    iframe.setAttribute("src", embed.replace("ID", v[n].dataset.id));
    iframe.setAttribute("frameborder", "0");
    iframe.setAttribute("allowfullscreen", "1");
    iframe.setAttribute("id", v[n].getAttribute("youtube"));
    v[n].appendChild(iframe);
  }
});

// Function to reveal lightbox and add YouTube autoplay
function revealVideo(div, video_id) {
  var video = document.getElementById(video_id).src;
  document.getElementById(video_id).src = video + "&autoplay=1"; // adding autoplay to the URL
  document.getElementById(div).style.display = "block";
}

// Hiding the lightbox and removing YouTube autoplay
function hideVideo(div, video_id) {
  var video = document.getElementById(video_id).src;
  var cleaned = video.replace("&autoplay=1", ""); // removing autoplay form url
  document.getElementById(video_id).src = cleaned;
  document.getElementById(div).style.display = "none";
}

Comments