Youtube Iframe Embed - Full Screen

YouTube iframe embed - full screen

Adding allowfullscreen="allowfullscreen" and altering the type of YouTube embed fixed my issue.

Youtube iframe - 'fullscreen is unavailable'

Depending on which browser you are using you may need alternative settings turned on iframe see: YouTube iframe embed - full screen for in depth answer

full screen option not working in youtube iframe in html

Why are you using this script https://codegena.com/assets/js/youtube-embed.js

This is disallowing it use this code instead

<div id="your_id">

<iframe width="240px" height="130px" src="https://www.youtube.com/embed/h4cYkgPnYQk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</div>

Displaying a YouTube video with iframe full width of page

To make a You Tube Video full width and preserve the height (and keep it responsive) you can use the following setup.

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0;
}

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="videoWrapper">
  <!-- Copy & Pasted from YouTube -->
  <iframe width="560" height="349" src="https://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

Allow you tube video full screen

Try this, when you are using firefox.

<iframe src="your_page_url" allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen" msallowfullscreen="msallowfullscreen" oallowfullscreen="oallowfullscreen" webkitallowfullscreen="webkitallowfullscreen"> </iframe> 

---

Related Topics