This is sort of a meta issue, stemming from #1809606: Video display broken (and fitvids integration).

I had a pretty decent workflow to gain responsiveness (using fitvids module):
Set the file display to width: 100% and height:auto and let fitvids grap .media-youtube-video to apply its magic.
This nice and easy workflow is now broken after moving a lot of stuff from Media to file entity (I guess, or was it mark-up changes in the media_yt/vimeo modules?)

  1. Using height:auto now results in a fixed height of 150px (I have no idea where this is coming from btw).
  2. The usage of fitvids results in a floating video display that ignores its placing and always wanders to the top of its region. Applying clear:both to .media-youtube-video repairs this. Is this coming from media_yt or fitvids module?

I liked the old workflow (or was I doing it wrong in the first place?) because it was fairly easy to do. Ideally I would like to come back to this state (i.e. make height: auto work again). At least we have to document how to get responsive media back.
Thoughts?

Members fund testing for the Drupal project. Drupal Association Learn more

Comments

dddave’s picture

Priority: Normal » Major
RobW’s picture

There haven't been any markup changes on this side. Can you give me a link to a misbehaving video?

dddave’s picture

Status: Active » Postponed

I have currently four installs behaving differently and they are basically configured the same. Going to dig into this first. I am slightly baffled atm to be honest.

dddave’s picture

Status: Postponed » Fixed

So it seems this was a problem with display suite in the first place. For whatever reason during one of the updates this all decided to break down on sites using display suite 1x. On DS 2x with all updates on all involved modules this seems to work now.
(on of my test installs had its updates not run correctly for whatever reason and on the other I simply misconfigured the file settings which resulted in major bafflement for me.)

dddave’s picture

Forgot to mention that now for fitvids it seems to be enough to simply use .region as target whereas beforehand I used .media-youtube-video.

RobW’s picture

Nice. I took a look at the markup in a clean install with Media dev, File entity dev, and M:YT dev, and don't see any changes from the last couple versions. Glad we didn't eff anything up accidentally.

dddave’s picture

If you are curious and can spare a second you could take a look on my personal site and try to see what is wrong there: http://fromwaydowntown.de/de/node/33#
This is the only install currently where for the live of me I don't get this sorted out.

kls010’s picture

I had the same issues on my site and found the solution in various places. I installed CSS injector to my site which allowed me to try various solutions.

Responsive embedded videos (not using media module)

Needs this to stop the collapse of the video height to 150px

1. Create content and use this ...

-- Copy & Paste YouTube video code --

2. This CSS needed to support it.

.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Responsive embedded videos using media module
1. In media file types, set video parameters for Vimeo and You Tube to be - width: 90%; height: auto;
2. Videos will collapse to 150px again so more CSS
3. .fluid-width-video-wrapper,
.media-youtube-preview-wrapper,
.media-youtube-outer-wrapper{
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.media-youtube-preview-wrapper object,
.media-youtube-preview-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

I used CSS injector to add this rather than mess with the core files. I created a CSS rule for each one. With the second rule for media module content, I restricted the use to only apply for content/*
All my videos are now responsive!! :D

Just trying to find where I sourced all the info, seem to have deleted the links I saved.

It isn't perfect, but the videos are responsive and no longer 150px in height.

Any more solutions gratefully received.

RobW’s picture

What I'm seeing is that using "auto" in the width or height attribute in the formatter settings, or in css in your stylesheet, is collapsing the video to it's natural height. The YouTube video object embed is normally that small and is stretched by default with heigh and width attributes. So the simple rules that work for images don't work here.

If you want a responsive embed and are only going to have one proportion of video on your site, you can set the width in css to 100%, and the height to something proportional like 52.65%, and that seems to work. But this is the specific problem that fitvids was intended to solve, so I'd probably use it here instead of plain css. Dave, in your example site I don't see fitvids applying to your iframes, so you may have mis-entered the class or selector for the vids.

dddave’s picture

Category: bug » support
Priority: Major » Normal
Status: Fixed » Active

This is completely killing me and it doesn't get any better by noticing that the Firefox webdeveloper screen size preview tool puts out completely different stuff than the firefox mobile browser on my phone. Dang!

I am pretty sure that at http://fromwaydowntown.de/de/inhalt/klettervideos-fuer-tapfere I do target the right iframe at least seems firebug be in agreement with me. Off course this isn't working so I am fracking this up again.

@rob Do you have a site where this is working?

RobW’s picture

I'm seeing a couple weird things on that page. One, the inspector says the same styles are being added 3 times. Two, fitvids is calculating the proportions of the vid to be 100% width by 17% height, which is odd. I don't see any width or height attributes on the iframe at all -- what happens when you add those in?

dddave’s picture

FileSize
311.2 KB
264.12 KB

So I disabled speedy which seemed to unclutter this a bit (however I cannot reproduce speedy's effect on my local sites but who knows). I also noticed that display suite (2x) wasn't correctly installed and corrected that.
The site currently has the video display set to height: auto and width: 300. The width is ignored (of course...) but the overall behavior on smaller devices seems very sane (i.e. fitvids works)

However I also tested this with width: 100%:
problem with width100%

with width: 800:
problem with width 800

See a pattern? Using width: 200 results in an actual display of 634*475 and using width: 20 in 634*4751...

dddave’s picture

FileSize
264.12 KB

Seems like % in uploads is a bad idea:
This is the first pic
fitvidsoddity100perc

RobW’s picture

Project: Media: YouTube » FitVids
Version: 7.x-2.x-dev » 7.x-1.x-dev

Hmmmm. I don't think this has anything to do with M:YT, so I think we should move it to the fitvids support queue.

Percent and auto values are not technically supported in x/HTML5, so it's probably best to stay away from them. My recommendation is to set a fixed width and height in the M:YT formatter, and then apply the fitvids library manually and see how that works.