Liquid, JavaScript, themes, sales channels
Hi Shopify community!
I'm at a bit of a loss on this one. There is a video embedded from youtube on an info page, it works on the desktop but not mobile. I've tried a couple of browsers on my iPhone and neither work. This theme is a customized purchased template, so I can't get support from Shopify and the original theme developers also said it was customized too much to offer support. I'm really hoping for some ideas on how this might be fixed.
Url is here: https://millerfarms.us/pages/about-us
Cheers!
Solved! Go to the solution
This is an accepted solution.
Thanks Welcome to the Shopify community!
1. Go to Online Store->Themes->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.video-wrapper {
z-index: 9999;
}
This is an accepted solution.
Thanks Welcome to the Shopify community!
1. Go to Online Store->Themes->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.video-wrapper {
z-index: 9999;
}
Hi,
I could not find this asset on my theme. I am using the Turbo theme.
Hi @chounmin
Thanks Welcome to the Shopify community!
Please share your site URL,
So I will check and provide a solution here.
Hi,
I have the same issue unfortunately. I tried the code you suggested, but it's not working..
Do you have an other solution?
my site is: www.sunnyjune.com (it's not live yet)
Thanks!
Daisy
Thanks for the tip @Vikas_Chovatiya I tried it on Shopify's "Debut" theme (https://joeveo.com) and it didn't work there.
Hi @dean_verhoeven
It's working properly
Hi, I am having the same issue. I am using Shopify District Theme and the embedded youtube link on the homepage does not load in Safari. It works fine in chrome on a mac. I tested it on my iphone and it would't work in safari. I then tested it in Safari on my mac and the youtube video did not play there as well. Can you please advise?
scalzini.com
Thanks very much,
Renee Scalzini
Hello.
Do you know how to make lite youtube embed work for mobile? Following works for desktop but embedded video is shown as black box on mobile. Embedding video is regular way is causing slow speed so I am looking for way to embed youtube video responsibly while imporving google mobile vital.
Thank you.
https://www.labnol.org/internet/light-youtube-embeds/27941/
HTML:
<div class="youtube-player" data-id="VIDEO_ID"></div>
<script> /* * Light YouTube Embeds by @labnol * Credit: https://www.labnol.org/ */ function labnolIframe(div) { var iframe = document.createElement('iframe'); iframe.setAttribute( 'src', 'https://www.youtube.com/embed/' + div.dataset.id + '?autoplay=1&rel=0' ); iframe.setAttribute('frameborder', '0'); iframe.setAttribute('allowfullscreen', '1'); iframe.setAttribute( 'allow', 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' ); div.parentNode.replaceChild(iframe, div); } function initYouTubeVideos() { var playerElements = document.getElementsByClassName('youtube-player'); for (var n = 0; n < playerElements.length; n++) { var videoId = playerElements[n].dataset.id; var div = document.createElement('div'); div.setAttribute('data-id', videoId); var thumbNode = document.createElement('img'); thumbNode.src='//i.ytimg.com/vi/ID/hqdefault.jpg'.replace( 'ID', videoId ); div.appendChild(thumbNode); var playButton = document.createElement('div'); playButton.setAttribute('class', 'play'); div.appendChild(playButton); div.onclick = function () { labnolIframe(this); }; playerElements[n].appendChild(div); } } document.addEventListener('DOMContentLoaded', initYouTubeVideos); </script>
<style> .youtube-player { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000; margin: 5px; } .youtube-player iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; background: transparent; } .youtube-player img { object-fit: cover; display: block; left: 0; bottom: 0; margin: auto; max-width: 100%; width: 100%; position: absolute; right: 0; top: 0; border: none; height: auto; cursor: pointer; -webkit-transition: 0.4s all; -moz-transition: 0.4s all; transition: 0.4s all; } .youtube-player img:hover { -webkit-filter: brightness(75%); } .youtube-player .play { height: 72px; width: 72px; left: 50%; top: 50%; margin-left: -36px; margin-top: -36px; position: absolute; background: url('//i.imgur.com/TxzC70f.png') no-repeat; cursor: pointer; } </style>
I am using Alchemy theme and did not work with me 😞
do you have a solution to this problem with json? my theme isn't liquid
Thank you for the post! this is truly helpful.
I have the same Youtube Video embed issue unfortunately. Now I found solutions on this post. Again thanks.
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024