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
Vertically Center and Left-Align a Column of Flex Items
Word-Wrap Break-Word Does Not Work in This Example
How to Send Mail with a Subject Using a Mailto Url
Can You Do This HTML Layout Without Using Tables
Why Does Perspective Changes Fixed Position in CSS
How to Put a Space Character Before Option Text in a HTML Select Element
Sticky Header and Footer Scrollable Content
CSS 100% Height, and Then Scroll Div Not Page
How to Implement a Navbar Dropdown Hover in Bootstrap V4
Send Form by Email and Track Responses in Spreadsheet
Bootstrap 4: Center Inline Form Inside a Jumbotron
Load a Low-Res Background Image First, Then a High-Res One
How to Use Bootstrap-Theme.CSS with Bootstrap 3
Body { Overflow-X: Hidden; } Breaks Position: Sticky
How to Prevent Browser from Caching Form Fields