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


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

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!


lsabug’s picture

Yes, thanks @joncjordan for this easy css fix.