THE MOLITOR FORUMS » Topic: Solution: Make YouTube embeds scale proportionally

THE MOLITOR on "Solution: Make YouTube embeds scale proportionally"

THE MOLITOR — Mon, 02 Mar 2015 10:32:08 +0000

Thanks for sharing! :-)

Dalileis on "Solution: Make YouTube embeds scale proportionally"

Dalileis — Sat, 28 Feb 2015 21:46:13 +0000

Widescreen HTML:

<div class="js-video widescreen [vimeo, widescreen]">
  <iframe width="560" height="315" src="http://www.youtube.com/embed/wN3gueLT0D8?showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>

Vimeo HTML:

<div class="js-video vimeo [vimeo, widescreen]">
  <iframe width="560" height="315" src="http://www.youtube.com/embed/wN3gueLT0D8?showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>

Dalileis on "Solution: Make YouTube embeds scale proportionally"

Dalileis — Sat, 28 Feb 2015 21:32:17 +0000

If the video is widescreen use: padding-bottom: 56.34%; above, otherwise: padding-bottom: 67.5%;.

Dalileis on "Solution: Make YouTube embeds scale proportionally"

Dalileis — Sat, 28 Feb 2015 21:24:09 +0000

Problem:

When you embed YouTube in your pages and posts, it does not scale proportionally like the rest of the content (wrapping text, accordion toggle buttons, etc...). Not a problem on full version, where fixed dimensions look ok. Problem on mobile version where fixed dimensions look less good. So how do you make YouTube embeds scale proportionally just like the rest of the content?

Solution (tested and working with Navigator 2.2.2. and also works for Vimeo embeds):

HTML:

<div class="js-video [vimeo, widescreen]">
  <iframe width="560" height="315" src="http://www.youtube.com/embed/wN3gueLT0D8?showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>

CSS (in style.css OR Wordpress dashboard > Appearance > Theme Options > Custom CSS):

/*---RESPONSIVE YOUTUBE & VIMEO STUFF---*/

.js-video {
  height: 0;
  padding-top: 25px;
  padding-bottom: 67.5%;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}

.js-video.widescreen {
  padding-bottom: 56.34%;
}

.js-video.vimeo {
  padding-top: 0;
}

.js-video embed, .js-video iframe, .js-video object, .js-video video {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}