How to make YouTube videos fit the XOOPS theme

Date 2015/2/10 12:59:34 | Topic: XOOPS Tips

Here is a trick how to embed YouTube videos to make them fit in all devices. Very useful if you use responsive themes:

First add a class in css:


.video-container {
    
positionrelative;
    
padding-bottom56.25%;
    
padding-top35px;
    
height0;
    
overflowhidden;
}
.
video-container iframe {
    
positionabsolute;
    
top:0;
    
left0;
    
width100%;
    
height100%;
}


Then add a div to the iframe for videos:


<div class="video-container"Embed code </div>


That will resize iframe embed code to fit the window




This article comes from DanorDesign
http://www.danordesign.com

The URL for this article is:
http://www.danordesign.com/modules/AMS/article.php?storyid=1