Videos extend abnormally / padding-top issue

Is that Media added with a module like Media YouTube or another one, which uses the Media Internet Sources API module? Which module is it?

I am not able to reproduce this issue with the same youtube video.

Can you reproduce this with other videos from youtube?
Does this issue also occur on the site ?q=media/8 (this is your video in the screenshot).

As this issue also occur in media/*, this seems to be a Media: Youtube issue or a conflict with other CSS settings (for iframe?).

As i can see from the Media:Youtube Code, the width and height attributes for the HTML-elements are set. So i think its best have a look on this values.
0. Go to ?q=media/8
1. Right klick on the titel --> Inspect Element (using Google Chrome, see attached screenshot)
2. in the bottom you can see the title selected (see screenshot).
3. open the html-elements by clicking on the arrow (see screenshot again).
4. click on the "iframe" -> this line should now be selected
5. make a new screenshot an attach it here.

I think with this information, we may can see whats going wrong.
(Which version of Media:Youtube do you use?)

As it is a FitVids library issue, i move it to FitVids module.

It seems, that the generated padding-top value in the library messes up the video height. If i remove the padding-top value from the library, everything seems to be fine.

(Just to mention: The library generates a div-element in the head of the html element! This is not a valid markup!)

The styles are injected into the page by the FitVids.js script - this module is just a wrapper for that script.

You might want to ask at the project page (at GitHub).

If you're still getting padding issues, try getting the latest version of the script from https://github.com/davatron5000/FitVids.js

I've been experiencing similar problems with the latest version. The advice given by Moloc in #11 is good. Removing the css padding-top part of line 71 of fitvids seems to work.

.css('padding-top', (aspectRatio * 100)+"%")

No more expanded videos.

But wait, there's more. If you are using the media_youtube module to pump out the HTML then it will put hardcoded style attributes into a couple of divs which wrap the iframe. This stops fitvids doing what it wants to do because the container is wrapped tightly around the iframe. I found that I could override these html styles in CSS by doing:

.media-youtube-outer-wrapper,
.media-youtube-preview-wrapper {
  height: auto !important;
  width: auto !important;
}

I now have fitvids working. Woot.

And here is the patch which worked for me in #14. It was applied to the library directory, not this module.

Hi all. One last update. I heard back from the maintainer of the FitVids library and apparently the padding-top is key to the way it works. So, you should probably scrap my pearls of wisdom in #14 and #15. Don't go changing the FitVids library.
https://github.com/davatron5000/FitVids.js/issues/56

One solution is to remove the media-youtube-preview-wrapper div from /media_youtube/includes/themes/media-youtube-video.tpl by implementing you own version of it in your theme.

<div class="media-youtube-outer-wrapper" id="media-youtube-<?php print $id; ?>" style="width: <?php print $width; ?>px; height: <?php print $height; ?>px;">
  <!-- THIS DIV BLOWS IT UP VERTICALLY<div class="media-youtube-preview-wrapper" id="<?php print $wrapper_id; ?>">-->
    <?php print $output; ?>
  <!--</div>-->
</div>

Getting rid of that div stops the images videos from blowing up vertically. The video appears to display OK. However, I am not sure what the knock on effects of this will be (if any) for media_youtube.

murrayw. Your fiix in #16 works, but by removing that DIV the JS no longer replaces the object embed with the iframe as the class ".media-youtube-preview-wrapper" is the selector used the HTML5 detection of file: media_youtube.js.

Personally, and this is a topic for another post, I think all the detection javascript should be cut out of media_youtube, media_vimeo etc and we should just serve up the iframe and let the providers handle the rest. See - http://drupal.org/node/1555276.

Until that day comes, here's a purely CSS fix that solved this issue for me. no need to edit the tpl files.

.fluid-width-video-wrapper,
.media-youtube-preview-wrapper,
.media-youtube-outer-wrapper {
    width: auto !important;
    height: auto !important;
}

Doh! I was almost there. Thanks Delicious Simplicity. That works for me.

One additional adjustment. I noticed that there were still some inconsistencies, mainly if you start with a narrow (mobile) with and scale the videos up from there. The css in media_youtube/css/media_youtube.css was doing it. One style in particular.

Revised CSS to add to your theme to combat the problemo:

.fluid-width-video-wrapper,
.media-youtube-preview-wrapper,
.media-youtube-outer-wrapper {
    width: auto !important;
    height: auto !important;
}
.media-youtube-preview-wrapper object,
.media-youtube-preview-wrapper iframe {
  max-width: none;
}

murrayw #16 works also on Vimeo! Thanks.

The new dev release (7.x-1.x-dev) strips out the wrapper divs automatically, so no need to add extra CSS.

I've checked the new 1.7 release and can confirm that it works for YouTube when our CSS has been removed. However, there is still a problem with Vimeo. Looks like the current dev will still have this problem as well.

Here's some HTML for reference for Vimeo:

<div class="media-vimeo-outer-wrapper" id="media-vimeo-1" style="width: 620px; height: 372px;">
  <div class="media-vimeo-preview-wrapper" id="media_vimeo_17150073_1" style="height: 372px; width: 620px; ">
    <div class="fluid-width-video-wrapper" style="padding-top: 60%; height: 372px; width: 620px; ">
      <iframe class="vimeo-player" type="text/html" frameborder="0" id="media_vimeo_17150073_1_iframe" src="http://player.vimeo.com/video/17150073"></iframe>
    </div>
  </div>
</div>

Thanks, a new dev release should appear soon, which does the same for Vimeo.
Are there any other media plugins that we need to watch out for?

There's a new release (1.8) on its way that should sort out Vimeo, too.

Before this module starts to jump through the loops please see the effort taken here: #1555276: Clean up theming function, Use recommended iframe player by default, without js and for media_vimeo here: #1715438: Update code and bring it in line with the latest Media Youtube release. Fixes numerous issues.

I can vouch for the fact that both media_youtube and media_vimeo work fine with fitvids.js thanks to these changes.

I've been following those changes - which are very cool - but thought I'd add some interim fixes until those media modules get released. Then I'll probably remove them, or make them optional.

Cool. Appreciate your efforts. Thanks!

Thanks DerekAhmedzai for rolling the latest updates into 1.8. Good stuff.

Thanks, I'll close this now.

With the latest Media: Vimeo dev, no !important or Vimeo-specific styles are needed. We'll try and get a stable out soon so that you can remove those styles from your module entirely.

Couldnt figure why it wasnt working for me, checked everything again and again - finally figured out the youtube embed code that uses youtube-nocookies.com as the src url wasnt getting swapped out so I needed to add http://www.youtube-nocookie.com to the 'custom iframe urls' field.

works sweet for me now