_includes/appscms/howto/howto.html in appscms-tools-theme-4.2.1 vs _includes/appscms/howto/howto.html in appscms-tools-theme-4.2.2

@@ -6,47 +6,36 @@
         {%- endif -%}
         <div class="col-md-6 appscms-howto-image">
           {%- if pageData.HOW_TO_CONTENT.YoutubeVideoUrl.size > 0 -%}
           <div class="how-to-video-wrapper">
             {% assign video_url = pageData.HOW_TO_CONTENT.YoutubeVideoUrl %}
-                            {% assign video_id = "" %}
-                            {% if video_url contains "youtu.be/" %}
-                            {% assign parts = video_url | split: "/" %}
-                            {% assign video_id = parts[3] %}
-                            {% elsif video_url contains "youtube.com/watch" %}
-                            {% assign params = video_url | split: "?" | last | split: "&" %}
-                            {% for param in params %}
-                            {% if param contains "v=" %}
-                            {% assign video_id = param | split: "=" | last %}
-                            {% endif %}
-                            {% endfor %}
-                            {% endif %}
-                          
-                            <div class="how-to-video h-100 w-100"  data-videoid="{{video_id}}">
-                                <img class="youtubeVideoPlayer" 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>
+            {% assign video_id = "" %}
+            {% if video_url contains "youtu.be/" %}
+            {% assign parts = video_url | split: "/" %}
+            {% assign video_id = parts[3] %}
+            {% elsif video_url contains "youtube.com/watch" %}
+            {% assign params = video_url | split: "?" | last | split: "&" %}
+            {% for param in params %}
+            {% if param contains "v=" %}
+            {% assign video_id = param | split: "=" | last %}
+            {% endif %}
+            {% endfor %}
+            {% endif %}
+
+            <div class="how-to-video h-100 w-100" data-videoid="{{video_id}}">
+              <img class="youtubeVideoPlayer" 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>
           </div>
           {%- else -%}
           <div class="how-to-img-wrapper">
-            <img
-              src="{{pageData.HOW_TO_CONTENT.logoImageUrl}}"
-              loading="lazy"
-              alt="{{pageData.HOW_TO_CONTENT.logoImageAlt | default: 'how to image' }}"
-              {%-
-              if
-              site.crossorigin
-              -%}
-              crossorigin
-              {%-
-              endif
-              -%}class="img-fluid align-self-end"
-              alt="Your Image"
-              style="width: 100%; height: 100%"
-            />
+            <img src="{{pageData.HOW_TO_CONTENT.logoImageUrl}}" loading="lazy"
+              alt="{{pageData.HOW_TO_CONTENT.logoImageAlt | default: 'how to image' }}" {%- if site.crossorigin -%}
+              crossorigin {%- endif -%}class="img-fluid align-self-end" alt="Your Image"
+              style="width: 100%; height: 100%" />
           </div>
           {%- endif -%}
         </div>
         <div class="col-md-6 appscms-howto-steps">
           <h2 class="mb-4 appscms-howto-heading">
@@ -65,35 +54,36 @@
       </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 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>';
+    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);
-          }
-      });
+    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 -%}
+{%- endif -%}
\ No newline at end of file