Embedded Youtube video needs two clicks to play on mobile view

Question

I was trying to create a lazy-loaded embedded youtube video with a custom icon as a play button. It is created successfully and even it is working properly in the desktop view. On desktop when I click on play button once the video gets started.

However when I open the page on mobile view and click on play button it doesn't play and also after the first click it was showing the youtube default play button. After that when I clicked on the Youtube default play button it starts to play the video.

I want to only click once to play the video on mobile. Please help me out to rectify it and let me know where exactly I am wrong in the code.

(function() {
  var youtube = document.querySelectorAll(".youtube");
  for (var i = 0; i < youtube.length; i++) {
    var source = "https://img.youtube.com/vi/" + youtube[i].dataset.embed + "/sddefault.jpg";
    var image = new Image();
    image.src = source;
    image.addEventListener("load", function() {
      youtube[i].appendChild(image);
    }(i));
    youtube[i].addEventListener("click", function() {
      var iframe = document.createElement("iframe");
      iframe.setAttribute("frameborder", "0");
      iframe.setAttribute("allowfullscreen", "");
      iframe.setAttribute("src", "https://www.youtube.com/embed/" + this.dataset.embed + "?rel=0&showinfo=0&controls=0&autoplay=1");
      this.innerHTML = "";
      this.appendChild(iframe);
    });
  };

})();

.youtube {
  background-color: #000;
  margin-bottom: 30px;
  position: relative;
  padding-top: 56.25%;
  overflow: hidden;
  cursor: pointer;
}

.youtube img {
  width: 100%;
  top: -16.84%;
  left: 0;
  opacity: 0.7;
}

.youtube .play-button {
  width: 90px;
  height: 60px;
  background-color: #333;
  box-shadow: 0 0 30px rgba( 0, 0, 0, 0.6);
  z-index: 1;
  opacity: 0.8;
  border-radius: 6px;
}

.youtube .play-button:before {
  content: "";
  border-style: solid;
  border-width: 15px 0 15px 26.0px;
  border-color: transparent transparent transparent #fff;
}

.youtube img,
.youtube .play-button {
  cursor: pointer;
}

.youtube img,
.youtube iframe,
.youtube .play-button,
.youtube .play-button:before {
  position: absolute;
}

.youtube .play-button,
.youtube .play-button:before {
  top: 50%;
  left: 50%;
  transform: translate3d( -50%, -50%, 0);
}

.youtube iframe {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

<div class="youtube" data-embed="AqcjdkPMPJA">
  <!-- (2) the "play" button -->
  <div class="play-button"></div>
</div>

there's no autoplay on mobile devices. If you simply load the video with that attribute the video won't start. Take a look at https://stackoverflow.com/questions/15090782/youtube-autoplay-not-working-on-mobile-devices-with-embedded-html5-player — Fabrizio Calderan, Jan 25 '18 at 10:18

score 1 · Answer 1 · edited Sep 14 '20 at 16:16

1

I'm not really sure that the author of this question wants the autoplay feature.

For what it's worth, I managed to embed a YouTube video in a way that you only need to click once on the player to run a video on a mobile device. In my opinion it's the matter of embedding the IFrame player from YT properly, so that you could use onYouTubeIframeAPIReady function.

Everything is quite well described here: YouTube Player API Reference for iframe Embeds

Made a fiddle, not in a loop, but you'll get the idea: JSFiddle

edited Sep 14 '20 at 16:16

TylerH

20,799
66
75
101

answered Jan 25 '18 at 10:56

sveg

61
1
5

I don't want autoplay instead I just want my video to play when someone clicks once on mobile view and also it should use lazy loading functionality so that the page will load faster on the browser. – Abhishek Rawal Jan 25 '18 at 11:12
Yeah, I thought so. I've added a JSFiddle to my response, maybe you'll find it usefull. – sveg Jan 25 '18 at 11:23
Please include the code from the JSFiddle in the answer itself to comply with site rules and prevent link rot. – TylerH Sep 14 '20 at 16:16

score 0 · Answer 2 · answered Jan 25 '18 at 10:31

Lazy loading that means auto play is allowed in mobile devices, rather add lazy load only to large devices using below media query remove lazy load for small devices like mobiles.

if($(window).width() < 767)
{
   // change functionality for smaller screens
} else {
   // change functionality for larger screens
}

score -2 · Answer 3 · edited Sep 14 '20 at 16:16

I managed to get videos to play with one click only on desktop/mobile with very similar JavaScript as yours, except with the addition of the onPlayerReady function:

function onPlayerReady(event) {
    event.target.playVideo();
}

If you're on WordPress, I've made a YouTube lazy loading plugin out of it. More info + demo here https://thinksmall.me/

If you're not on WordPress, feel free to open the plugin and view its code. The code is very close to yours with the loop. You'll see how to make it work with the onPlayerReady function.

Embedded Youtube video needs two clicks to play on mobile view

3 Answers3