css - Responsive youtube video with i-frame -


i have following frame in html , contain youtube video.here frame-:

<iframe width="420" height="315" src="https://www.youtube.com/embed/dgpo56imqua?showinfo=1" frameborder="0" allowfullscreen></iframe> 

how can make i- frame responsive

you can use intrinsic ratio. containing element responsive , stays @ specific aspect ratio. iframe inside positioned absolutely element.

html

<div class="videowrapper">     <!-- copy & pasted youtube -->     <iframe width="420" height="315" src="https://www.youtube.com/embed/dgpo56imqua?showinfo=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%; } 

more info on css tricks


Comments

Popular posts from this blog

Java 3D LWJGL collision -

spring - SubProtocolWebSocketHandler - No handlers -

methods - python can't use function in submodule -