Category: XHTML, CSS

How to target IE 8 and bellow inside your css

March 5, 2014
in   Code Samples, CSS, Web Development, XHTML, CSS
0 
body {
color: red; /* all browsers, of course */
color : green9; /* IE8 and below */
*color : yellow; /* IE7 and below */
_color : orange; /* IE6 */
}

How to make your Vimeo or YouTube video responsive

October 15, 2013
in   HTML-CSS, Mobil Web, Responsive, Technology, Web Development, XHTML, CSS
0

First of all wrap the video embed code with a’div’and specify a 50% to 60% padding bottom. Then, name and specify the child elements i.e ‘iframe’, ‘object’, ‘embed’ as having 100% width, 100% height, with absolute position. This forces all the embed elements to expand to full-width automatically!

Here is the html mark up

<div class="video-wrapper">
   <iframe width="500" height="281" 
src="http://www.youtube.com/watch?v=1CKgKKxyhBI" frameborder="0" allowfullscreen="">
   </iframe>
</div>

Using CSS you can set the video to be responsive.

.video-wrapper { 
    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%; 
}

Enjoy!

Recent Posts