The code i used for the custom liquid section is below. I only want the autoplay video to appear on my homepage but when i try to hide it from a product page or a collection it hides it from every page. Please advise:
<div class="page-width" {% if section.settings.fullwidth %} style="max-width: 100%!important;margin: 0;padding:0px" {% endif %} > <div class="video-section"> <h2>{{ section.settings.heading }}</h2> </div> {% if section.settings.video_url.type == 'youtube' %} <div class="video-container" {% if section.settings.fullwidth %} style="width: 100%;" {% endif %} > <iframe src="https://www.youtube.com/embed/{{ section.settings.video_url.id }}{% if section.settings.autoplay %}?autoplay=1&mute=1{% endif %}{% if section.settings.controller == false %}&controls=0{% endif %}&modestbranding=1" class="youtube" width="100%" height="600px" ></iframe> </div> {% elsif section.settings.video_url.type == 'vimeo' %} <div class="video-container"> <video src="https://player.vimeo.com/video/{{ section.settings.video_url.id }}{% if section.settings.autoplay %}?autoplay=1&mute=1{% endif %}" class="vimeo" {% if section.settings.fullwidth %} style="width: 100%;" {% endif %} ></video> </div> {% elsif section.settings.self_hosted_video %} <div class="video-container" {% if section.settings.fullwidth %} style="width: 100%;" {% endif %} > {{ section.settings.self_hosted_video | video_tag: controls: section.settings.controller, autoplay: section.settings.autoplay, loop: true, width: '100%' }} </div> {% endif %} </div> {% if section.settings.fullwidth %} <style> /* Your full-height styles go here */ .video-container { position: relative; width: 100%; padding-bottom: 56.25%; /* Adjust this value as needed for the aspect ratio */ height: 0; overflow: hidden; } .video-container iframe, .video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style> {% endif %} <script> document.addEventListener('DOMContentLoaded', function () { var videos = document.querySelectorAll('.youtube, .vimeo'); function playPauseVideos() { videos.forEach(function (video) { if (section.settings.autoplay) { video.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*'); } else { video.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*'); } }); } // Initial play/pause based on the 'Autoplay video' setting playPauseVideos(); // Listen for changes in the 'Autoplay video' setting and play/pause accordingly document.getElementById('section_autoplay').addEventListener('change', function () { section.settings.autoplay = this.checked; playPauseVideos(); }); }); </script> {% schema %} { "name": "Video WebSensePro", "settings": [ { "type": "text", "id": "heading", "label": "Video section heading", "default": "Video Autoplay" }, { "type": "checkbox", "id": "fullwidth", "label": "Make Full Width" }, { "type": "checkbox", "id": "autoplay", "label": "Autoplay video", "default": false }, { "type": "checkbox", "id": "controller", "label": "Enable Controls", "default": false }, { "type": "video", "id": "self_hosted_video", "label":"Select Video" } ], "presets": [ { "name": "Video WebSensePro" } ] } {% endschema %}
