Look Ma, responsive embedded youtube videos in Kalatheme

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.

Posted on: Last updated on: Written by:

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.