_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