Responsive Embeded Video

Wed, 02/27/2013 - 20:41 -- admin

 responsive design tip and tricks

Today I found a couple of great Drupal videos through Facebook. One video was from YouTube and the other through Vimeo. Both videos were very well done and described all the virtues of Drupal.

Once I added the enbed code to my site I quickly realized that the videos were not responsive . Both embed codes contained a fixed height and fixed width, a no-no for responsive site design. Since I use the Omega Theme, I opened my themes global.css file and added two blocks of CSS code

The First CSS Elements:

	p.iframe {
	padding-bottom: 56.25%; 
	height: 0;
	position: relative;

The Second CSS Elements:

	p.iframe iframe {
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	position: absolute;

I then added the class "iframe" to the <p> element which were enclosing the <iframe> embeded video

That was it - It worked Like a charm!

Thanks to the Frindly Machine for the direction