Geek Answers Handbook

Display YouTube videos with iframes full page width

I posted the video on my site using iframeYouTube, and iframe- full width ( 100%), the video is very small (height) inside the frame. How do I adjust the width of the container?

The code:

<iframe width="100%" height="100%" src="https://www.youtube.com/embed/5m_ZUQTW13I" frameborder="0" allowfullscreen></iframe>

See screenshot

enter image description here

+4
source share
3 answers

To make the full width of the video image and keep the height (and keep it responsive), you can use the following setting.

HTML with video

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

CSS

.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%;
}
+20
source

, iframe , , .

, / , , 100% . , 1920x1080, - , (vw). 100vw , , , .

iframe{
 width: 100vw
 height: calc(100vw/1.77);
}
+6

fullscreen:

<html>
 <body>
  <iframe id="myFrame" src="http://www.youtube.com/embed/W7qWa52k-nE" frameborder="0" allowfullscreen></iframe>
 </body>
</html>

, css:

#myFrame{
position:relative;
top:0;
left:0;
width:100%;
height:100%;
-1

More articles:


All Articles