Debut Theme Video on mobile

sebastianotto
Tourist
7 0 1

Hey Folks,


my shopify store is www.hyperhyperlapse.com - when you visit the store on desktop, it plays a video immediately (youtube embedded) as you go onto the home page. However, the video doesn't play on mobiles and we have a picture (gif) show up instead.

I'm using the "Debut" theme - does anyone know how I can make the video play on mobile as well? About 80% of our traffic is mobile so it's quite important..!

Thanks.

0 Likes
Ash
Shopify Staff
Shopify Staff
772 86 117

Hey, @sebastianotto!

Ash here from the Shopify team. 

Thank you for reaching out with your question! I took a look at your site on both desktop and on mobile, and I see exactly what you're referring to. While the video auto-plays on desktop, the way it's currently displaying on the mobile version is actually expected behaviour, and the video won't auto-play on mobile by default due to how the debut theme was designed. When in your theme customizer, by clicking on the video section you'll see an area called "cover photo", and that is what's displayed on mobile devices by default rather than the full video. 

If you're set on having the video auto-play on mobile similar to how it does on desktop, I suggest hiring a Shopify Expert for some assistance, as it would require a code customization on the theme to achieve. Shopify Experts are trusted, third-party agencies and freelancers, who are available for hire by Shopify Merchants. You can visit their site here to contact an Expert, or post a job request and receive quotes from eligible Experts.

I hope this is helpful, and please feel free to reach out any time if you need further assistance. I'd also love to provide some more feedback to our team in charge of developing and updating themes such as Debut, and if you could reply back with some more context on why the auto-play video on mobile is important to you, I'll be glad to pass that along. 

Ash | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
sebastianotto
Tourist
7 0 1

Hey @Ash!

Thanks for replying! I think its very important to have some sort of option, so that the admin can decide which fits best to their site, when it comes to mobile. For us it's not important, that maybe the video couldn't load on mobile cause of bad internet connection. 

 

Greetings

Sebastian

0 Likes
CYL
New Member
2 0 0

Hey can anyone help with getting my YouTube video to play automatically in my debut home page 

0 Likes
hausofjung
New Member
5 0 0

Thank you for sharing- The video looks great on your site, but I cannot find out: how were you able to upload the video in the first place straight onto the home page? Did you use a specific template to edit the home page, or was it code? And if it was code, any chance you may share with a fellow stuggling? Thank you.

0 Likes
CYL
New Member
2 0 0
Hey Good Evening,

So The only way to add the video to the site is via a YouTube link. I spoke with a developer for Shopify and apparently there’s no way to add it in the Code Injection. I think it all depends on the sort of template you buy. I mean it works for now but with this specific template the only option is to create a business YouTube page and upload your video to get a link and then add the link to the site.
0 Likes
creatistla
New Member
1 0 1

To add a new section with video in debut:

Edit code > Sections > Add a new section > Delete what's in the new file and paste code below > Replace with your video link from youtube/vimeo OR host on shopify by doing this:

- Setting > Files > Upload files > Select video (must be under 20MB) > Copy link and paste in code:

<div class="outer-wrapper">
<div class="video-wrapper">
<iframe width="560" height="315" src="YOUR VIDEO LINK HERE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>
</div>
{% schema %}
{
"name": "Header Video",
"settings": [],

"presets":[
{
"category":"video",
"name":"Hero Video"
}
]
}
{% endschema %}

{% stylesheet %}

}
.outer-wrapper {
/* Limit width and centre horizontally */
max-width: 560px;
margin: auto;
}
.video-wrapper {
/* Set context for absolutely positioned child and force the aspect ratio of this element to 16:9 */
position: relative;
padding-bottom: 56.25%;
}
.video-wrapper iframe {
/* fit the video into the parent element completely */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}

 

 

You can now go to Online Store > Customize > add new section and it should show up as "Hero Video"

carolinastew
New Member
2 0 0

Thank you so much for this!! Works like a charm and can actually make it look professional instead of like a blog!

0 Likes