I'm going to say this is a Pebcak issue but may involve adding some documentation or an explanation some where. I've tried multiple css class selectors to get youtube iframes to scale properly with no luck what so ever.

I'm guessing I either don't have the right selector or need to add something into my css for my theme (I'm using omega).

Can someone who has this working with youtube videos tell me whats the best way to get this to work? I have it at the moment set on both a wrapper around the video and on elements inside the iframe. I've also tried it using the media module and youtube filter field.

If anyone can help me out here it would be appreciated, the page I'm trying to get this to work on is http://battlefieldcheaters.com/report/121-kills-type-88-wtf

Comments

Dale Baldwin’s picture

Dale Baldwin CreditAttribution: Dale Baldwin commented

Yes pebkac, documentation needs to be updated to indicate that the following css needs to be added to theme. I only worked it out after I read through the html example code on github not sure the average Drupal newbie would have picked that up. I'm guessing the only reason it hasn't come up yet is most designers haven't moved over to responsive design yet. Thanks Dale

          video {
            width: 100%;
            height: auto;
          }
          
          .container {
            width: 70%;
            padding: 5%;
            margin:0px auto;
            background:#fff;
            box-shadow: 0 5px 5px rgba(0,0,0,0.5);
          }
          
          .vendor {
            padding: 2%;
            background: #d1eed1;
            margin-bottom: 2em;
          }
          
          .unsupported {
            background: #fddfde;
          }
Nigeria’s picture

Nigeria CreditAttribution: Nigeria commented

I added this on the Sky Theme from AdapativeThemes but it didn't solve the original issues that other users have stated previously

DerekAhmedzai’s picture

DerekAhmedzai CreditAttribution: DerekAhmedzai commented

You shouldn't need to add that extra CSS - the whole point of the fitvids.js plugin is to let videos scale to the width of the container.

You can add min-width and max-width to the container to constrain it though.

Have you got the latest version of the plugin from https://github.com/davatron5000/FitVids.js ?

Nigeria’s picture

Nigeria CreditAttribution: Nigeria commented

Yes.

Nigeria’s picture

Nigeria CreditAttribution: Nigeria commented

Yes.

camerongoble’s picture

camerongoble CreditAttribution: camerongoble commented

Same trouble here. The documentation really slides over how the container works, so it's difficult to understand how to make a choice about implementing it. The video on the blog is more about being impressed with how the videos resize than it is about putting the right class declaration in the right places. Poor teaching, guy.

Does the container class name come from YouTube itself, or from a local css declaration, or what?

Dale Baldwin’s picture

Dale Baldwin CreditAttribution: Dale Baldwin commented

It's somewhat local, the best way I found to do it is to put a wrapper around the iframe and put the css and set fitvid container to that wrapper, depending on the iframe that comes down there is some crazy z-index crap in there that plays havoc with Drupal's interface and also container boxes.

endrus’s picture

endrus CreditAttribution: endrus commented

Hello! Did all the above. However, the container is resizing while video stays the same. Theme: Omega Responsive. What am I missing?

maf138’s picture

maf138 CreditAttribution: maf138 commented

If this is any help, I got this working by editing this file: (bear in mind, I am using vimeo and not youtube) media-vimeo-video.tpl.php (video is my content type) located in the respective modules directory. I deleted the inline styling for width and height, wrapped it in a div with a class of video and then added my own CSS.

I agree with DerekAhmedzai about not having to do this, but I am finding it easier to re-theme a copy of Garland and add my own media queries.

Perhaps one day all will work perfectly, right?

sibiru’s picture

sibiru CreditAttribution: sibiru commented

I've install this module
Hi i want to resize the video from youtube to max width:300px, ive define it in my CSS file
then what should i do?

dotman’s picture

dotman CreditAttribution: dotman commented

Could i please get some help with adding a vimeo or you tube video placed to a block then region using the omega theme?

1. What belongs in the "Video Containers" box in the fitvids configuration?
2. What code do i need to put in my block to properly display the video so it will resize?
3. What CSS needs to go in which file if necessary.

I really wish there was a step by step for those of us who are new to coding. Would really appreciate help getting this to work.

thanks.

Anonymous’s picture

Anonymous (not verified) CreditAttribution: Anonymous commented

Please help dear friends

i can't manage to get youtube or any videos "elastic"

i add "player-container" but nothing happens

Best regards
ArchGalileu

dddave’s picture

dddave CreditAttribution: dddave commented

I strongly share the urge for a little bit of help as suggested in #11. I cannot get youtube videos to resize (added via media module but I doubt this is the problem). What the frag do I have to do?

RobW’s picture

RobW CreditAttribution: RobW commented

@ the op Dale Baldwin, the first thing I see is that the script tag for fitvids.js (line 72 of your example post source) doesn't point to the fitvids.js file, but a copy of the fitvids github page (whaaa???). It looks like you may have right clicked and saved the link on the fitvids module page instead of clicking through and downloading the actual js file.

If you fix that and are still having trouble, or if anyone else who's having problems would like to post a link, I'll take a look over the next day or so.

indigetal’s picture

indigetal CreditAttribution: indigetal commented

All I did was create a fitvids folder in sites/all/libraries, placed jquery.fitvids.js file in the folder and all of a sudden my youtube video is responsive. In a somewhat complete reversal of the common complaint I want to know how come fitvids just worked for me??? Although I am still trying to figure out how to get max-width to behave, right now it just distorts the aspect ratio of the frame so its really narrow, I'm not a genius at CSS yet but max-height definitely isn't working.

dddave’s picture

dddave CreditAttribution: dddave commented

Closed #1535642: Help with using this module and #1534850: No work with media_youtube as dupes. Both are a cry for help aka a clear documentation what we have to do here.

@RobW I am trying my luck at http://fromwaydowntown.de/content/klettervideos-f%C3%BCr-tapfere

RobW’s picture

RobW CreditAttribution: RobW commented

In order to debug, here's what people should try, in order:

  1. Make sure you have the library correctly downloaded and installed.
  2. Specify ONLY 1 fitvids container selector. This should be the containing element of your video.
  3. If you are using Youtube, Vimeo, or Kickstarter videos, don't specify a custom provider.
  4. If you're using Media Youtube, try disabling and copy/pasting the iframe embed code directly into your WYSIWYG editor. You'll need to be using a full html editor profile. Right now Media Youtube inserts the <object> embed code then replaces it with an iframe using javascript on page load (not a fan of that, see #1555276: Clean up theming function, Use recommended iframe player by default, without js). Very likely multiple javascript manipulations are over writing each other -- if anyone tests this and gets a definitive answer, please post here or add it to the above issue [edit: some more info in my reply to dddave below].
  5. As a last resort, load fitvids with drupal_add_js() and test manually.

@dddave, Media Youtube is adding a style attr with height and width to your iframe, and to all of its containers. I'd say that's your problem. I would try going to Manage File Display and removing the explicit width and height attr. from Media Youtube first, see if that stops it from adding the style to the element with js, and if not find a better way to insert Youtube videos.

dddave’s picture

dddave CreditAttribution: dddave commented

Wow, thanks for this really helpful advise. Killing the explicit width and height settings did the trick. Responsive joy immediately. BUT (of course there is a but): I still have to find out why the vid is so flat. Somewhere it is getting 155px from but it feels like I am on the right track.

Actually I was using the .player-container selector but it seems that was superflous as the default of .region also results in responsive behavior. Alas as described in #15 the height is distorted and needs some fixing. Or (bare with my lack of understanding please) do I have to precisely get the right selector and not taking the .region bomb (or am I misunderstanding the selector principle here completely?)?

I am definitely going to provide a click-monkey friendly write-up after I mastered this...

edit: Where the frack is the height: 150px coming from. My head hurts...

Anonymous’s picture

Anonymous (not verified) CreditAttribution: Anonymous commented

Hi dddave

Same for me the height is a problem and i can't arrange.

Best regards
ArchGalileu

RobW’s picture

RobW CreditAttribution: RobW commented

@dddave: From what I see, FitVids is not applying to your videos right now. What you have is an iframe being set to full width by some js and height being set by the contents of the iframe. I am going to almost guarantee that your problem is Media Youtube, which has a ton of js and css cruft in it, either overriding the FitVids js or removing the element that fitvid attaches to as mentioned in #17-4 above. Try disabling the module and manually inserting the Youtube embed code into your textarea manually, or try an alternate youtube field if you're currently using a media or file field instead of the WYSIWYG insert.

murrayw’s picture

murrayw CreditAttribution: murrayw commented

Hi guys. I've been hammering away on this problem on another thread and have come up with a 2 step solution for youtube:
http://drupal.org/node/1375102#comment-6067132

For the purposes of this thread one insight is that media_youtube puts in width and height values direct into the HTML. That is probably what is causing you the grief of not getting any resizing. If you set those those values to auto then it may well just work for you.

Unfortunately for me I continue to have problems with the padding-top setting which is added via FitVids, resulting in videos which are much too tall as per 1375102.

dsbrianwebster’s picture

dsbrianwebster CreditAttribution: dsbrianwebster commented

See my comment here:

http://drupal.org/node/1375102#comment-6072632

RobW’s picture

RobW CreditAttribution: RobW commented

I wrote a patch for Media Youtube that removes the iframe replacement js and the half finished responsive js, among some other things. Pretty sure if you apply it, fitvids.js will work. Feel free to test: http://drupal.org/node/1555276#comment-6156570

Note that it changes the theme output, so you'll have to alter your fitvids selectors.

dddave’s picture

dddave CreditAttribution: dddave commented

After applying this patch fitvids.js behaved much, much saner. Awesome!

RobW’s picture

RobW CreditAttribution: RobW commented
Status: Active » Fixed

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

fadgadget’s picture

fadgadget CreditAttribution: fadgadget commented

i used

.field-name-field-mediame

with 'mediame' being the name of my media field. Works great. thanks

sunnydeveloper’s picture

sunnydeveloper CreditAttribution: sunnydeveloper commented

adding: iframe, object, embed, video { max-width: 100%; }

made youtube work for me. as per this blog:http://www.rgracia.com/content/blog/mar/5/2013/fluid-video-fitvidsjs-and...

rodneireis’s picture

rodneireis CreditAttribution: rodneireis commented

I was with the same problem. Thanks to #17 and #27 it's working now.

erata’s picture

erata CreditAttribution: erata commented
Issue summary: View changes

may this article help you

rahul_sankrit’s picture

rahul_sankrit CreditAttribution: rahul_sankrit commented

Adding a class to Article body iframe for youtube embed code using jQuery drupal7

$(document).ready(function() {
	var src = $('.node-type-article .field-name-body iframe',this).attr('src');  // Getting the current src of an Iframe.
    	var res = src.match(/youtube.com/);  // Search the text "youtube.com" in source.
        if (res == 'youtube.com') {$("iframe").addClass("youtube_embed");}	 // add the class to the article body iframe.
});
smartsystems160’s picture

smartsystems160 CreditAttribution: smartsystems160 commented

for the embedded video inside the node body, i noticed that the iframe div wrapper had a padding of 400% so i changed this to 60%. Using omega theme.

.fluid-width-video-wrapper {padding-top: 60% !important;}

For the video from the embed video field module, i solved the issue by removing width settings on the video styles. using views, i just display the video using the "normal" video style.