Responsive youtube

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.

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

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%;
}

@joncjordan: Thanks, you are a genius!

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

Yes, thanks @joncjordan for this easy css fix.

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.

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.

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.

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

I had success with this great module.
https://www.drupal.org/project/fitvids

For anyone using fitvids to scale on the Open Social distribution.

Use the ".card-body" jQuery selector in the Video Container section. Works a treat!

Comment #4 is just what I needed to make our D7 videos responsive. Thanks for the simple solution.
I just added class "embedded-video" to the configuration page of the Video Embed Field/ Video Embed Styles.
Out of the Box!
It took me less time to implement and test (on DEV) than it did to write this. ;)

Ditto with FitVids - works really well for Youtube, though didn't manage to get it working on facebook videos, though no problem there, as its only our videos we're embedding.

Thanks @joncjordan for this #4 css fix. Really saved me a lot of time and effort

#4 saved my life :)

If the video is embedded from within CKEditor, how would you make it responsive? The width seem to resize as the screen is adjusted however the height stays the same, thus causing the aspect ratio of the video to change, which displays a black background.

This is for Drupal 8.