CSS Responsive Videos

Again, these are old tricks but new to me as I get back into developing new sites rather than supporting Telerk based ones.  In the previous post I shared a CSS snippet on how to make images responsive.  Now onto video.  A lot of sites offer ways for you to copy some code that allows you to paste their videos into your various web sites.  Many use iframes to do this which can be a little problematic.

The following CSS snippet works for youtube videos at least.  I just take whatever copy/paste code form a given site that allows me to embed things and wrap it in a div with the class "vid".  Here is the CSS.

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

This seemed to work.  More information [HERE].