How to add a video on my homepage without YouTube info

Highlighted
Tourist
3 0 3

Hey, maybe try to move the code for the video towards the top of the code file but below the header. Without seeing your code it's hard to tell what your issue is. I actually decided not to use any of the solutions on this page because they are buggy and don't work on all devices, especially mobile devices. I would recommend using one the theme templets that have build in video players or even paying for one of the premium themes. Shopify does not offer an easy solution for playing background videos without the YouTube info on all devices. Many solutions seem to work on desktop but not mobile. There are solutions out there, but Shopify doesn't make it easy. Best of luck, I've been battling with video playing issues for weeks haha. 

0 Likes
Highlighted
Tourist
7 0 1

I worked! Thanks!

1 Like
Highlighted
Tourist
3 0 3

You're welcome! I'm glad you got it to work.

0 Likes
Highlighted
Tourist
5 0 1

Yes, I was facing similar issues with debut theme. Shopify api only accept video from youtube or vimeo.
So i had to created custom section for video. First need to upload video in shopify.

Just upload video and copy link.
Dashboad==> Theme ==> customize ==> setting ==> file ==> upload

Then create a custom section. 

Dashboad==> Theme ==> customize ==> Edit Code

section name custom-video

<div class="page-width section-hura-video">
<video autoplay muted loop playsinline class="hurabg-video">
<source src="{{ section.settings.cm_video_link }}" type="video/mp4">
</video>
</div>


{% schema %}
{
"name": {
"da": "Custom Video",
"de": "Custom Video",
"en": "Custom Video",
"es": "Custom Video",
"fi": "Custom Video",
"fr": "Vidéo",
"hi": "वीडियो",
"it": "Video",
"ja": "動画",
"ko": "동영상",
"nb": "Video",
"nl": "Video",
"pt-BR": "Vídeo",
"pt-PT": "Vídeo",
"sv": "Video",
"th": "วิดีโอ",
"zh-CN": "视频",
"zh-TW": "影片"
},
"class": "index-section video-section",
"settings": [
{
"type": "text",
"id": "cm_video_link",
"label": {
"da": "Overskrift",
"de": "Überschrift",
"en": "Video Link",
"es": "Título",
"fi": "Otsake",
"fr": "En-tête",
"hi": "शीर्षक",
"it": "Custom Video",
"ja": "見出し",
"ko": "제목",
"nb": "Overskrift",
"nl": "Kop",
"pt-BR": "Título",
"pt-PT": "Título",
"sv": "Rubrik",
"th": "ส่วนหัว",
"zh-CN": "标题",
"zh-TW": "標題"
}
}
],
"presets": [
{
"name": {
"da": "Custom Video",
"de": "Custom Video",
"en": "Custom Video",
"es": "Custom Video",
"fi": "Custom Video",
"fr": "Custom Video",
"hi": "वीडियो",
"it": "Video",
"ja": "動画",
"ko": "동영상",
"nb": "Video",
"nl": "Video",
"pt-BR": "Vídeo",
"pt-PT": "Vídeo",
"sv": "Video",
"th": "วิดีโอ",
"zh-CN": "视频",
"zh-TW": "影片"
},
"category": {
"da": "Video",
"de": "Video",
"en": "Video",
"es": "Video",
"fi": "Video",
"fr": "Vidéo",
"hi": "वीडियो",
"it": "Video",
"ja": "動画",
"ko": "동영상",
"nb": "Video",
"nl": "Video",
"pt-BR": "Vídeo",
"pt-PT": "Vídeo",
"sv": "Video",
"th": "วิดีโอ",
"zh-CN": "视频",
"zh-TW": "影片"
}
}
]
}
{% endschema %}

{% stylesheet %}
.section-hura-video{
width:100%;
}
.hurabg-video{
right: 0;
bottom: 0;
width: 100%;
height: auto;
}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}



Hope it's helpful.

 

1 Like
Highlighted
New Member
4 0 0

Hi Sarhov,

Can you please let us know where we paste the below link to?

 

<video loop="" muted="" autoplay="autoplay" preload="" id="vid">
    <source src="url_of_the_file.webm" type="video/webm">
    <source src="url_of_the_file.mp4" type="video/mp4">
  </video>

 

Do we paste this in customize->video->video link? Because when we paste the code here, it says it only accepts YouTube links.  

0 Likes
Highlighted
New Member
1 0 0

Hi ArrowUp,

Thanks for sharing the code for adding the YouTube video to the homepage in debut. I've been trying to get this working for a while.

I have added the section and inserted it into the front page but the section is showing as an empty space.

Can you suggest how this can be fixed?

Thanks, J

0 Likes
Highlighted
Tourist
5 0 1

Now you have to set link of video on custom link field. Then it will show as expected.

Need help on coding then let me know.

0 Likes