{%- if dataToShow.HOW_TO_CONTENT -%}
<div class="container" id="howContainer">
    <p class="howto mb-0">How to</p>
    <div class="how-to-section mt-5 align-items-center row pt-5 justify-content-center">
        {%- if site.ezoicAds -%}
        <div class="col-md-9 mx-auto">
            <div class="row">
                {%- endif -%}
                <div class="col-md-6 order-0 ">
                    {%- if dataToShow.HOW_TO_CONTENT.YoutubeVideoUrl.size > 0 -%}
                    <div class="how-to-video-wrapper">
                        {% assign video_url = dataToShow.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" data-videoid="{{video_id}}">
                            <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>





                    </div>
                    {%- else -%}
                    <div class="how-to-img-wrapper ">
                        <img width="100%" height="100%" class="how-to-leftimg"
                            src="{{dataToShow.HOW_TO_CONTENT.logoImageUrl}}" loading="lazy"
                            alt="{{dataToShow.HOW_TO_CONTENT.logoImageAlt | default: 'how to image' }}">
                    </div>
                    {%- endif -%}
                </div>
                <div class="col-md-6 order-1">
                    <h3 class="how-to-title">{{dataToShow.HOW_TO_CONTENT.heading | replace: "$variable",
                        page.value}}</h3>
                    {% for data in dataToShow.HOW_TO_CONTENT.steps %}
                    <div id="step{{forloop.index}}" class="how-to-list-item">
                        {{forloop.index}}. {{data | replace: "$variable", page.value}}
                    </div>
                    {% endfor %}
                </div>
                {%- if site.ezoicAds -%}
            </div>
        </div>
        {%- endif -%}
    </div>
</div>
{%- 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 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="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) {
                // 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 -%}