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.