_includes/wordgames/howto/howto.html in word-games-theme-2.3.7 vs _includes/wordgames/howto/howto.html in word-games-theme-2.3.8

- old
+ new

@@ -27,24 +27,13 @@ {% if param contains "v=" %} {% assign video_id = param | split: "=" | last %} {% endif %} {% endfor %} {% endif %} - <!-- {%- if site.ezoicAds -%} - <iframe loading="lazy" class="youtubeVideoPlayer mb-5" width="400" height="315" - src="https://www.youtube.com/embed/{{video_id}}?autoplay=0&mute=1" allowfullscreen - loading="lazy"> - </iframe> - {%- else -%} - <iframe loading="lazy" class="youtubeVideoPlayer mb-5" width="500" height="315" - src="https://www.youtube.com/embed/{{video_id}}?autoplay=0&mute=1" allowfullscreen - loading="lazy"> - </iframe> - {%- endif -%} --> - + <div class="how-to-video" data-videoid="{{video_id}}"> - <img class="youtubeVideoPlayer mb-5" width="500px" height="315px" id="thumbnail-img" alt="thumbnail-img" /> + <img class="youtubeVideoPlayer mb-5" width="100%" height="100%" id="thumbnail-img" alt="thumbnail-img" /> <div class="youtube-play-btn-wrapper"> <button class="play-btn btn btn-primary" onClick="loadVideo()">►</button> </div> </div> @@ -83,19 +72,21 @@ </div> </div> </section> {%- endif -%} + +{%- if dataToShow.HOW_TO_CONTENT.YoutubeVideoUrl.size > 0 -%} <script> let videoContainer = document.querySelector('.how-to-video'); + let videoId = videoContainer.getAttribute("data-videoid") let thumbnail = document.getElementById('thumbnail-img'); - let videoId =videoContainer.getAttribute("data-videoid") let thumbnailUrl = 'https://img.youtube.com/vi/' + videoId + '/maxresdefault.jpg'; // Function to load video function loadVideo() { - videoContainer.innerHTML = '<iframe loading="lazy" class="youtubeVideoPlayer mb-5" width="500" height="315" src="https://www.youtube.com/embed/' + videoId + '?autoplay=1&mute=1" allowfullscreen></iframe>'; + videoContainer.innerHTML = '<iframe loading="lazy" class="youtubeVideoPlayer mb-5" width="100%" height="315" src="https://www.youtube.com/embed/' + videoId + '?autoplay=1&mute=1" allowfullscreen></iframe>'; } // Function to handle lazy loading of the thumbnail function lazyLoadThumbnail(entries, observer) { entries.forEach(entry => { if (entry.isIntersecting) { @@ -109,6 +100,7 @@ // Set up the Intersection Observer var observer = new IntersectionObserver(lazyLoadThumbnail, { threshold: 0.1 }); observer.observe(thumbnail); // Optionally, you can add an event listener to trigger video loading on click or other interactions thumbnail.addEventListener('click', loadVideo); -</script> +</script> +{%- endif -%} \ No newline at end of file