How to add video to Debut Theme home page without using YouTube or Vimeo

Highlighted
New Member
1 0 1

Hi -I am new to the Shopify platform, and I'm first time community board poster.

 

I'm having trouble adding a new section using a video "mp4" at 17.7 MB on the homepage of the Debut Theme. The video is to stretch the entire of length of page and confined to the section at the bottom of the page and above the footer. The video loads onto the page, but I cannot seem to adjust the height of the section using CSS seen below or get the video text overlay to align center. I don't want to use YouTube due to issues removing YouTube's title bar. I'm trying to avoid upgrading my Vimeo account at this time.

 

The first thing I did was create a new section inside the Edit Code for Debut and named it index-video.liquid. Then I added this code to the index-video.liquid section found from a Google search https://www.huratips.com/tech-tips/how-to-add-a-video-section-to-your-shopify-home-page.html.

 

<div class="section-index-video">
  <video autoplay muted loop playsinline id="vidBg" class="smoke-video">
    <source src="https://cdn.shopify.com/s/files/1/0023/2810/0929/files/Smoke_Light_08_Videvo_1080.mp4?v=1589667403" type="video/mp4"/>
  </video> 
</div>
<div class="vidOverlay">
  <h3 id="vidOverlay">/kärmik/ /myooz/</h3>
  <h3 id="vidOverlay">an herbal connoisseur  whose actions and intentions inspire elevated self-reflection</h3>
</div>
{% schema %}
{
"name": "Section name",
"settings": []
}
{% endschema %}
 
{% stylesheet %}
.section-index-video{
  display: block;
  width:100%;
  height: 325px;
  z-index: 0;
}
.smoke-video{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  z-index: -1;
  
  
}
.vidOverlay{
 position: absolute;
 z-index: 1;
}
#vidOverlay{
 
 left: 0,
 top: 50%;
 width: 100%;
 text-align: center;
 color: #000000;
 text-family: Arial;
 
}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}

The second step I took was to add the following code on the second line of the template called index.liquid inside the Edit Code for Debut. I also found this snippet from a Google search https://www.huratips.com/tech-tips/how-to-add-a-video-section-to-your-shopify-home-page.html.

 

{% section 'index-video' %}

Any input on the correct code to use and where to place it to solve customizing embedded video and text overlay without using YouTube and Vimeo is appreciated.

 

Thanks in advance!

1 Like
Highlighted
New Member
2 0 0

This is my exact problem right now, and I have no solution. Did you figure it out?

0 Likes