How to do does Video Embed Field responsive ?
I got a few problem with youtube o facebook video. i think actually i 'm not only one with this issue

Files: 
CommentFileSizeAuthor
#8 highlighted_feature.png123.41 KBlennartvv

Comments

wbobeirne’s picture

You can apply CSS to an iframe like anything else, and the Youtube video will resize just fine. The only issue is maintaining an aspect ratio if you do a fluid width like width: 100%, that you may need Javascript for. I haven't tried it with the Facebook player, but I imagine it resizes just as well too.

wbobeirne’s picture

Status:Active» Closed (works as designed)
DerekAhmedzai’s picture

You can use FitVids for responsive video embeds
http://drupal.org/project/fitvids

joncjordan’s picture

Issue summary:View changes

You can also add this css:

.embedded-video .player {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}

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

Nicolino77’s picture

@joncjordan: Thanks, you are a genius!

mandymeng’s picture

I have a view that display slideshow of embedded Facebook videos. I have tried all different methods that I found online but none of them worked. I tried above code and the whole video window disappeared.

The layout look like this:

Any one can help me with this, please?

I really appreciate your time!

Mandy

lsabug’s picture

Yes, thanks @joncjordan for this easy css fix.

lennartvv’s picture

Version:7.x-2.0-beta5» 7.x-2.0-beta11
Status:Closed (works as designed)» Active
FileSize
123.41 KB

The feature 'responsive out of the box' is promoted on the project page of this module (see screenshot):

Responsive out the box, optionally make your videos scale proportionally to their container.

So far I couldn't manage to make this work 'out of the box' without writing extra lines of CSS.

Could anyone explain how this works out of the box? Or update the documentation (which is oblivious of responsiveness)?
If it's not possible, perhaps this highlighted feature should be removed from the project page because it's misleading. In that case this issue can be closed as well.

Sam152’s picture

The feature list refers to the Drupal 8 version of the module. Perhaps that should be made clear, but in the near future most new sites are going to be Drupal 8, so generally people installing modules are going to be interested in Drupal 8 features.

Sam152’s picture

If you're interested in the Drupal 8 version CSS, it's very similar to what has already been provided:

.video-embed-field-responsive-video {
  position: relative;
}

.video-embed-field-responsive-video:after {
  content: '';
  display: block;
  padding-bottom: 56.25%;
}

.video-embed-field-responsive-video iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

Stick that class on your field, or replace the class name with a class already on your field and you're good to go.

Sam152’s picture

Status:Active» Closed (works as designed)
lennartvv’s picture

It should be made clear indeed. Thanks for the quick feedback!