How to Make a Youtube Embedded Video a Full Page Width One

How to make a YouTube embedded video a full page width one?

Here's a FIDDLE

<iframe id="video" src="//www.youtube.com/embed/5iiPC-VGFLU" frameborder="0" allowfullscreen></iframe>

$(function(){
$('#video').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' });

// If you want to keep full screen on window resize
$(window).resize(function(){
$('#video').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' });
});
});

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>

YouTube iframe embed - full screen

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

CSS - 100% width of Youtube embed video

Added one more div with overflow hidden and fixed height and it works.

<div style="height: 200px; overflow: hidden">
<div class="video">
<iframe src="https://www.youtube.com/embed/bRhZUF47p2E?version=3&rel=0&controls=0&showinfo=0&autoplay=1&mute=1&loop=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
<style>
.video {
width: 100%;
height: 200px;
border: 1px solid red;
overflow: hidden;
position: relative;
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>

http://jsfiddle.net/pj2utq4v/

Full Width and Height Responsive Embedded YouTube Video

Add embed-responsive embed-responsive-4by3 to your video-wrapper class

This is from bootstrap

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>

Automatic height when embedding a YouTube video?

This article contains a good answer, copied below.

CSS:

.video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Example Html

<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/_TyJeKKQh-s?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

How this works: The container element is given a zero height and a percentage bottom padding. The percentage bottom padding is a percentage of the container width, so that gives it a fixed aspect ratio. But in order to get the iframe to show up inside the zero-height container, you need to make the container relative and the iframe absolute, positioned inside the div.

See a live example.


EDIT:
If you need to use percentage width other than 100%, multiply the ratio by the width multiplying factor. See the example below:

.video-container {
position: relative;
padding-bottom: calc(56.25% * 0.75); /* 16:9 */
width: 75%;
height: 0;
}



Related Topics



Leave a reply



Submit