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

TG2106
Tourist
3 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!

Eli-O
Excursionist
15 0 5

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

0 Likes
macin
New Member
2 0 0

same here, solution anyone?

0 Likes
Eli-O
Excursionist
15 0 5

Yeah, I have a solution.

 

Doesn't really matter what your theme is, you can do two options.

1. Look through the code I'm going to paste below and edit your own.

2. Hit edit code on your theme. Create a section. Name is something unique. Paste all the code below. Add it as a section option for your background video.

Either should work, works with an Mp4 file that is uploaded to Shopify's servers. This works probably 10x faster than a youtube or vimeo pull. I recommend it.

 

Here's the code:

 

<div id="section-{{ section.id }}" class="site-box-container container--fullscreen">

<div class="site-box box--typo-bigger box--center-align box--column-flow box__video-background box__image-text button-true align--{{ section.settings.txt_align }}">

<div class="site-box-content">

<div class="content">

{%- unless section.settings.caption == blank -%}
<p class="caption">{{ section.settings.caption | escape }}</p>
{%- endunless -%}

{%- unless section.settings.heading == blank -%}
<h2 class="title">{{ section.settings.heading | escape }}</h2>
{%- endunless -%}

{%- unless section.settings.button == blank -%}
<a class="button with-icon" {% unless section.settings.link == blank %} href="{{ section.settings.link }}" {% endunless %}> {{ section.settings.button | escape }} <span class="icon" aria-hidden="true">{% render 'theme-symbols', icon: 'arrow_icon_smallest' %}</span></a>
{%- endunless -%}

</div>

</div>

{%- unless section.settings.video == blank -%}
<div class="site-box-video-background" data-src="{{ section.settings.video }}"></div>
{%- endunless -%}

{%- unless section.settings.image == blank -%}

<span class="site-box-background with-image" aria-hidden="true">

<img
src="{{ section.settings.image | img_url: '960x' }}" alt="{{ section.settings.image.alt | escape }}"
srcset="data&colon;image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-srcset="{{ section.settings.image | img_url: '600x' }} 480w, {{ section.settings.image | img_url: '860x' }} 720w, {{ section.settings.image | img_url: '1100x' }} 960w, {{ section.settings.image | img_url: '1600x' }} 1440w, {{ section.settings.image | img_url: '2100x' }} 1920w"
data-sizes="auto"
class="lazyload" />

<noscript><span class="ll-fallback" style="background-image:url({{ section.settings.image | img_url: '960x' }})"></span></noscript>

</span>

{%- endunless -%}

</div>

{%- if section.settings.color_text != 'rgba(0,0,0,0)' -%}

{%- assign color_text = section.settings.color_text -%}
{%- assign color_text_brightness = color_text | color_brightness -%}
{%- if color_text_brightness > 150 -%}
{%- assign color_text_foreground = '#000' -%}
{%- else -%}
{%- assign color_text_foreground = '#fff' -%}
{%- endif -%}

{%- assign color_accent = settings.color_accent -%}
{%- assign color_accent_brightness = color_accent | color_brightness -%}
{%- if color_accent_brightness > 150 -%}
{%- assign color_accent_foreground = '#000' -%}
{%- else -%}
{%- assign color_accent_foreground = '#fff' -%}
{%- endif -%}

{%- style -%}
#section-{{ section.id }} .box__image-text,
#section-{{ section.id }} .box__image-text a.site-box-content {
color: {{ section.settings.color_text }};
}
#section-{{ section.id }} .box__image-text .title.add-hr:after {
background: {{ section.settings.color_text }};
}
#section-{{ section.id }} .box__image-text a.button {
background: {{ section.settings.color_text }};
color: {{ color_text_foreground }} !important;
}
#section-{{ section.id }} .box__image-text a.button:hover {
color: {{ color_accent_foreground }} !important;
}
{%- endstyle -%}

{%- endif -%}


</div>

{% schema %}
{
"name": "Background video",
"class": "index-section mount-video-background",
"settings": [
{
"id": "video",
"type": "text",
"label": "Video URL",
"info": "Path to an .mp4 video file",
"default": "//cdn.shopify.com/s/files/1/0266/9543/4315/files/Share_your_brand_story_by_adding_a_video_to_your_store.mp4?3663"
},
{
"type": "image_picker",
"id": "image",
"label": "Fallback image",
"info": "A fallback image will be used on mobile devices where autoplay might be disabled."
},
{
"type": "header",
"content": "Text"
},
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Video title"
},
{
"type": "text",
"id": "caption",
"label": "Caption",
"default": "Share your brand's story"
},
{
"type": "text",
"id": "button",
"label": "Button label"
},
{
"type": "url",
"id": "link",
"label": "Button link"
},
{
"type": "select",
"id": "txt_align",
"label": "Text alignment",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "center"
},
{
"type": "color",
"id": "color_text",
"label": "Text color",
"default": "rgba(0,0,0,0)"
}
],
"presets": [{
"name": "Video Background",
"category": "Video"
}]
}
{% endschema %}

joana4
Tourist
6 0 1

Hi @Eli-O

Thank you so much for the code, I am working on my debut theme and I was able to add the video background section.

However, when I add the video URL to the MP4 video file nothing shows up, same for the button and text overlay. I can only see the fall back image.

I also get this message:

0 Likes
Eli-O
Excursionist
15 0 5

Yeah that's just line 18 pulling in the button code from my theme.

If you want the background video section to have a button code that looks exactly like yours you have to pull your own.

If you just want to see it work, try deleting this piece of code that it's trying to pull.

Delete as many as you can. Some of the code is general and will work for you, other bits are pulling directly from my own customizations.

Anyway, here's the line below.

 

Screen Shot 2021-01-23 at 1.32.51 PM.png

From the <span --- to the </span> bit. Delete that.

Find any others with the control F function and then delete those too. It's code for the button icon I have.

0 Likes
macin
New Member
2 0 0
Hey,

is it Shopify?

I think I could help you here.
0 Likes
PDXTDJ
New Member
1 0 0

Hi, I'd be thrilled for some help, having spent two days trying to figure this out,,  I have the Broadcast theme and want to add video. What I would like to know if the video in the Broadcast Clean theme demo shown would be from uploading a video from which way Youtube/Vimeo or with Code

I'm into the process seen above, however I don't see the suggested line in the copied code that is supposed to taken out?  I couldn't find it in between SPAN to SPAN with the copy in it. 

Nor could I find where to add/replace my uploaded url for my video from uploads file.  Help

0 Likes
Eli-O
Excursionist
15 0 5

All videos in Shopify themes are uploaded via Youtube, Vimeo, or mp4 links. There's never a "need" to code things in.

 

Some of the other guys are going into the backend to force customizations they'd like, that their current theme doesn't have.

 

The reason why people prefer MP4 files is because you can upload them to your shopify account, this means shopify is "hosting" them - instead of youtube or vimeo.

 

Why would anyone want that? Loads way faster. Basically instantly if video is < 4mb.

 

The line of the code to remove that would cause an error there is line 18. The code is numbered.

 

What kind of errors are you getting?

 

0 Likes
JavsHorne
New Member
1 0 0

Hi! I will love some help with this topic, I added the previous code in this tread, then added the section content in the desire page template, all that is working fine. I deleted the line 18 and no problem any more with the button. But still no video is been shown. I added the video into the library of my shopify and copy the same url that was created when I upload the video, but does not seam to show any video. 

Thanks in advance.

Javier

0 Likes