Making an iframe Responsive

Supplemental 190 views
+1
0 Flares 0 Flares ×

Add the class of “video” to the div or other element that contains your iframe to make it responsive.

.video {
    width:100%;
    position:relative;
}

.video iframe,  
.video object,  
.video embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Example

Shrink the browser window down to see the video move responsively.

Tagged with: ,
Posted in CSS

Discuss:

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

No Trackbacks.

Login

Register | Lost your password?
0 Flares Twitter 0 Facebook 0 Google+ 0 0 Flares ×