In this little tutorial I'll show you how to make your embedded video ifames responsive.
I'll demonstrate it in case of YouTube videos...but it works on same way with all other video mycode templates.
Open the theme template "video_youtube_embed"
and replace the whole content with:
Save this themplate changes and open the theme CSS file "global.css" in advanced mode.
Include the following CSS rules into this global.css file:
Save this file changes and you're done.
I'll demonstrate it in case of YouTube videos...but it works on same way with all other video mycode templates.
Open the theme template "video_youtube_embed"
PHP Code:
<iframe width="560" height="315" src="//www.youtube.com/embed/{$id}" frameborder="0" allowfullscreen></iframe>
and replace the whole content with:
PHP Code:
<div class="resp_vid_cont">
<div class="resp_vid">
<iframe width="560" height="315" src="//www.youtube.com/embed/{$id}" frameborder="0" allowfullscreen></iframe>
</div>
</div>
Save this themplate changes and open the theme CSS file "global.css" in advanced mode.
Include the following CSS rules into this global.css file:
Code:
.resp_vid_cont {
max-width: 560px;
height: auto;
overflow: hidden;
}
.resp_vid {
position: relative;
padding-bottom: 56.25%;
padding-top: 0px;
height: 0;
overflow: hidden;
}
.resp_vid iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}Save this file changes and you're done.