So Kalatheme “ships with many responsive layouts, templates and tools right out of the box” and is built right on top of Panopoly (think responsive panels, panelizer…). But I used the built in Media capabilities to stick a video field into a news article application, and it was stuck in big. So I got a quick fix from this article by John Surdakowski, and applied it in just a few lines of CSS in my Kalatheme based sub-theme’s css/main.css file:
/* Responsive you-tube video */
.media-youtube-video {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}
.media-youtube-video iframe {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
This is a bare-bones approach, but works splendidly in Kalatheme, and should work with other module sets and themes also, after having identified the iframe container div classes, and the appropriate iframe classes.