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

[SillyMG24]

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!

[BSSCommerce-TA]

Hello @SillyMG24 ,

I have edited the code for you, hopefully this is what you want 😁
If you want more details, please contact me

<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 %}
    >
      <div class="video-button">Button here</div>
      <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">
      <div class="video-button">Button here</div>
      <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 %}
    >
      <div class="video-button">Button here</div>
      {{
        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 %}
<style>
  .video-container {
    position: relative;
  }
    .video-button {
      position: absolute !important;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 10;
    }
  .video-button {
    background-color: #FFFFFF;
    border: 1px solid #222222;
    border-radius: 8px;
    box-sizing: border-box;
    color: #222222;
    cursor: pointer;
    display: inline-block;
    font-family: Circular,-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    padding: 10px;
  }
</style>

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

End, Result:

1. Full width

2. Not full width

[namphan]

Hi @SillyMG24,

You can follow the below instructions, it will help you to add section and work well.

I hope it helps!