i'm trying create responsive website hold several youtube videos in same line , adjust proportionally when changing window size.
in addition videos not placed beneath of menu. tried , still cannot work...
html part:
<body> <div id="main_grid"> <div id="header"> <a id="logo"></a> <a id="search"></a> <a href="#" id="english">english</a> <nav> <a href="#" id="menu-icon"></a> <ul> <li><a href="#" class="current">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> </ul> </nav> </div> <div id="video-container1" > <iframe width="640" height="480" src="https://www.youtube.com/embed/n-nb6k_6pwg" frameborder="0" allowfullscreen> </iframe> </div> <div id="video-container2" > <iframe width="320" height="240" src="https://www.youtube.com/embed/n-nb6k_6pwg" frameborder="0" allowfullscreen> </iframe> </div> </div> </body> css part:
body { font-size: 1.05em; line-height: 1.25em; font-family: alef hebrew; background: #f9f9f9; color: #555; height:auto; width:100%; margin:0; padding:0; } #header { width: 100%; height: 76px; position: fixed; top: 0; left: 0; border-bottom: 3px solid #c0c0c0; z-index: 100; } #main_grid { position: absolute; width:95%; margin: 0 auto; padding: 20px; } #video-container1 { position:relative; padding-bottom:56.25%; padding-top:30px; height: 0; overflow: hidden; } #video-container1 iframe { position:absolute; top:0; left:0; width:100%; height:100%; } #video-container2 { position:relative; padding-bottom:56.25%; padding-top:25px; height: auto; width:100%; } #video-container2 iframe { position:absolute; top:0; right:0; width:100%; height:100%; }
you can set size of videos expression of vw , vh, viewport width , height. if want have multiple videos on line, , each of them @ 20% of width page wide, , have 4:3 ratio, can write css this:
.videocontainer { width: 20vw; height: 15vw; /* 3/4 of 20 */ max-height: 20vh; max-width: 27vh; /* 4/3 of 20 */ } 
Comments
Post a Comment