I am using a theme that adjusts according to the device being used (computer, tablet, or smartphone).
Is it possible for me to set things up with your module so that my YouTube videos size changes or adjusts automatically (like small, medium, or large)? If so, I would I do this? If not, any ideas on how I can accomplish this? Thanks for your help.


RobW’s picture

Status: Active » Fixed

You can do this with a css pattern known as Uncle Dave's ol' Padded Box or a little js library like FitVids. There's a Drupal module that helps with using FitVids too, although I prefer to just use the js directly.

glidetothehoop’s picture

Thank you so much!

RobW’s picture

No problem.

thelee’s picture

how do you use fitvids for this? I tried using the library and it doesn't work at all; the media: youtube module is embedding fixed width and height on the flash embed which is choking fitvids up.

thelee’s picture

Status: Fixed » Needs review
RobW’s picture

Can you copy and paste the html here?

thelee’s picture

using the basic default media: youtube embed, which yields this:

<div class="media-youtube-outer-wrapper" id="media-youtube-1" style="width: 480px; height: 360px;">
  <div class="media-youtube-preview-wrapper" id="media_youtube_Txf5_vYJuzw_1">
        <object width="480" height="360">
      <param name="movie" value="http://www.youtube.com/v/Txf5_vYJuzw?version=3">
      <param name="allowFullScreen" value="true">
      <param name="wmode" value="transparent">
      <embed src="http://www.youtube.com/v/Txf5_vYJuzw?version=3" type="application/x-shockwave-flash" width="480" height="360" allowfullscreen="true" wmode="transparent">

and then with the console I'm just doing:


the element flickers, it gets wrapped by the fitvids wrapper, but nothing actually changes.

EDIT: i haven't had much time to play with this, but my hypothesis is that the flash object is being set with a fixed width and height, which is foiling fitvids's attempts to make it responsive.

RobW’s picture

Status: Active » Needs review

Try updating M:YT to the dev version which uses an iframe, width and height attributes, and much reduced/improved html. There's currently nothing in the dev that isn't an improvement over the last stable release, so it's safe on production. (Just so you know FitVids has been tested and shown to work many times with the dev version).

aaron’s picture

Status: Needs review » Active
steinmb’s picture

Version: 7.x-2.0-rc1 » 7.x-2.x-dev
Status: Needs review » Active

Did you actually get a solution to this?

Hardcoding the size in px at /admin/structure/file-types/manage/video/file-display/something is not really flexible though using width:100% fail. Fail in that way that I could not find a way to calculate the height.

dmkelner’s picture

Issue summary: View changes

I just got this to work, so I thought I'd post it for others. If you are using the video field in a view, wrap the field in a div with a class of .video-container. Then use this css:

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; 
	height: 0; 
	overflow: hidden;
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

For some reason, when I just display the node it is wrapped in a video tag instead of an embed, so that is easy enough to style with a simple width:100% and height:auto.