Essentially, all you have to do to get your iframe-embedded videos(Youtube or whatever) to be responsive is add the "max-width" property to the element, like:
And in your stylesheet, add this (and tweak it however you need):
<div class="video-container"><iframe src="//www.youtube.com/embed/e2tkIzHuqHc" width="420" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>And in your stylesheet, add this (and tweak it however you need):
.video-container {
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%;
max-width: 100%;
}Is the stylesheet referring to the Styles.css in Theme/Default Clean folder? Thank you very much, i am learning a lot :-)
