Youtube video embed not working on mobile

Technical Q&A
1

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!

2

Hi @margotharringto

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;
}
3

This worked! Thank you @Vikas_Chovatiya ! Have a good rest of your day!

4

Hi,

I could not find this asset on my theme. I am using the Turbo theme.

5

Hi @chounmin

Thanks Welcome to the Shopify community!
Please share your site URL,
So I will check and provide a solution here.

6

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

7

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.

8

Thanks for the tip @Vikas_Chovatiya I tried it on Shopify’s “Debut” theme (https://joeveo.com) and it didn’t work there.

9

Hi @dean_verhoeven

It’s working properly

10

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>
11

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?

Thanks very much,

Renee Scalzini

12

I am using Alchemy theme and did not work with me :disappointed_face:

13

do you have a solution to this problem with json? my theme isn’t liquid

14

@Vikas_Chovatiya its not working for me could you help?

IMG_5521.jpg
IMG_5521.jpg1170×2532 121 KB