Responsive Video

To make your videos responsive you just need to put them into a wrapper div and use just a small CSS trick.
Here is the code:

CSS

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
.video-container iframe, .video-container object, .video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

HTML

<div class="video-container">
<iframe width="560" height="315" src="http://www.youtube.com/embed/k9cAyb_Iqow" frameborder="0" allowfullscreen></iframe>
</div>

Demo


Go Daddy


Related articles

Redirect www to non www with .htaccess RewriteRule

Redirect www to non www with .htaccess RewriteRule

05/12/2015

Redirect your websites visitors from www.domain.com to domain.com without www.

Unordered List Style Image CSS

Unordered List Style Image CSS

06/03/2013

Learn how to style UL with any image using CSS.

OL and UL List CSS Style

OL and UL List CSS Style

03/03/2013

Styling ordered and unordered lists is easy. Just write a single line of CSS to change the list style type.


Leave a comment

We welcome any comment from you! Please keep in mind that comments are moderated and rel='nofollow' is in use. So, please do not use a domain as your name or a spammy keyword, or your comment will be deleted.

Name: *

E-mail: *

Message: *

Click on the baby *


Find us on Facebook

Tags

Get online with the world's Best - GoDaddy.com!

Back to Top