_includes/appscms/howto/howto.html in appscms-tools-theme-4.1.3 vs _includes/appscms/howto/howto.html in appscms-tools-theme-4.1.5

@@ -65,34 +65,35 @@
       </div>
     </div>
     {%- endif -%}
   </div>
 </div>
-
+{%- if pageData.HOW_TO_CONTENT.YoutubeVideoUrl.size > 0 -%}
 <script>
-    let videoContainer = document.querySelector('.how-to-video');
-    let thumbnail = document.getElementById('thumbnail-img');
-    let videoId =videoContainer.getAttribute("data-videoid")
-    let thumbnailUrl = 'https://img.youtube.com/vi/' + videoId + '/maxresdefault.jpg';
-    console.log(videoId)
+  let videoContainer = document.querySelector('.how-to-video');
+  let thumbnail = document.getElementById('thumbnail-img');
+  let videoId =videoContainer.getAttribute("data-videoid")
+  let thumbnailUrl = 'https://img.youtube.com/vi/' + videoId + '/maxresdefault.jpg';
+  console.log(videoId)
 
-    // Function to load video
-    function loadVideo() {
-        videoContainer.innerHTML = '<iframe loading="lazy" class="youtubeVideoPlayer" width="100%" height="100%" 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) {
-                // Load thumbnail when it becomes visible
-                thumbnail.src = thumbnailUrl;
-                // Stop observing once loaded
-                observer.unobserve(entry.target);
-            }
-        });
-    }
-    // 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>
\ No newline at end of file
+  // Function to load video
+  function loadVideo() {
+      videoContainer.innerHTML = '<iframe loading="lazy" class="youtubeVideoPlayer" width="100%" height="100%" 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) {
+              // Load thumbnail when it becomes visible
+              thumbnail.src = thumbnailUrl;
+              // Stop observing once loaded
+              observer.unobserve(entry.target);
+          }
+      });
+  }
+  // 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>
+{%- endif -%}