How to put button over video that was placed via liquid code/section?

SillyMG24
Visitor
1 0 0

Hello, I am quite basic at this stuff so thanks for the help and bearing with!

 

I found some liquid code I could use to put a video on autoplay which works great, but I would also like to put a round button over the video (very same button you see throughout the Refresh theme, which I am using) which I would then use to put a 'shop all' button or something of that nature. I have not been able to find something that works for me though.

 

Here is the code used to get the video autoplaying on my homepage. I added this as a 'new section' so I could use Shopify hosted videos :

 

 

 

<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 %}

 

Is this possible? Thanks again!

Replies 0 (0)