Member Avatar for showman13

I have been all over the internet trying to figure out how to plan an embedded youtube video in full screen automatically and have failed at every turn.

Any ideas here?

<iframe src="//www.youtube.com/embed/9ptECXgpIwk?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>

several links on the web say that the rel=0 is what makes it happen, but my understanding of that part is that it prevents related videos from being displayed when the video ends.

I don't want to use specific width and height because I want it to work on any device to the full extent of the screen size of that device.

Any help here would be greatly appreciated
Douglas

  • 3 Contributors
  • 3 Replies
  • 3K Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by showman13

Dani AI

Generated

Short answer: browsers intentionally block sites from forcing fullscreen on load. The Fullscreen API requires a user gesture (click/tap/keypress) to enter fullscreen, so is right. Also, rel=0 never controlled fullscreen; since Sep 25, 2018 it only limits related videos to the same channel. MDN: requestFullscreen and YouTube player parameters (rel, playsinline).

A practical pattern that works well today is: (1) load a muted autoplay preview, and (2) on the first user tap, request fullscreen and start playback. Be sure your iframe grants permission for autoplay and fullscreen via the allow attribute, and use the IFrame Player API to mute before autoplay. MDN: Autoplay guide and MDN: Permissions-Policy/iframe allow.

<!-- Fill the viewport; show YouTube controls so users can exit FS -->
<iframe id="yt"
  src="https://www.youtube.com/embed/9ptECXgpIwk?enablejsapi=1&autoplay=1&playsinline=1&rel=0"
  style="position:fixed;inset:0;border:0;width:100vw;height:100vh"
  allow="autoplay; fullscreen"></iframe>

<script src="https://www.youtube.com/iframe_api"></script>
<script>
  let player;
  window.onYouTubeIframeAPIReady = function () {
    player = new YT.Player('yt', {
      events: { onReady: e => e.target.mute() } // muted autoplay preview
    });
  };

  // First user interaction -> go fullscreen and play with sound
  document.addEventListener('click', async function onFirstClick() {
    document.removeEventListener('click', onFirstClick);
    const iframe = document.getElementById('yt');
    try { await iframe.requestFullscreen(); } catch (_) {}
    player.unMute();
    player.playVideo();
  });
</script>

This respects user intent, keeps the video responsive across devices, and gives a one-tap path to fullscreen. If you need inline playback on iOS before fullscreen, keep playsinline=1 as shown. YouTube IFrame Player API.

Recommended Answers

All 3 Replies

Member Avatar for rproffitt

OK, your tag is PHP but you didn't specify that this was in a browser. As you know you may not take over the screen like that. You could if you had the user run some app. There are plenty of prior discussions about this but for now, you can't violate what the user wants to see in their browser view.

commented: ops, I missed that _automatically_ thanks :D +14
Member Avatar for cereal

By the way, have you tried through their API? https://codepen.io/bfred-it/pen/GgOvLM

commented: That's the click to play fullscreen method. So far, you can't omit that click. +10
Member Avatar for showman13

Just in case anyone is interested... I never did find a way to display full screen automatically no matter what the device.

Instead I opted to set the i frame to a size that will fit on any device and notate the bottom right corner of the video to click for full screen.

Not as effective nor as elegant as I would have liked, but I guess it will server the purpose.

Thanks for the responses.

commented: thanks for sharing +14
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.