Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
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
Comment | File | Size | Author |
---|---|---|---|
#8 | highlighted_feature.png | 123.41 KB | Fernly |
Comments
Comment #1
wbobeirne CreditAttribution: wbobeirne commentedYou 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.
Comment #2
wbobeirne CreditAttribution: wbobeirne commentedComment #3
DerekAhmedzai CreditAttribution: DerekAhmedzai commentedYou can use FitVids for responsive video embeds
http://drupal.org/project/fitvids
Comment #4
joncjordan CreditAttribution: joncjordan commentedYou 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%;
}
Comment #5
Nicolino77 CreditAttribution: Nicolino77 commented@joncjordan: Thanks, you are a genius!
Comment #6
mandymeng CreditAttribution: mandymeng commentedI 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
Comment #7
lias CreditAttribution: lias commentedYes, thanks @joncjordan for this easy css fix.
Comment #8
Fernly CreditAttribution: Fernly as a volunteer commentedThe feature 'responsive out of the box' is promoted on the project page of this module (see screenshot):
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.
Comment #9
Sam152 CreditAttribution: Sam152 as a volunteer and at PreviousNext commentedThe 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.
Comment #10
Sam152 CreditAttribution: Sam152 as a volunteer and at PreviousNext commentedIf you're interested in the Drupal 8 version CSS, it's very similar to what has already been provided:
Stick that class on your field, or replace the class name with a class already on your field and you're good to go.
Comment #11
Sam152 CreditAttribution: Sam152 as a volunteer and at PreviousNext commentedComment #12
Fernly CreditAttribution: Fernly as a volunteer commentedIt should be made clear indeed. Thanks for the quick feedback!
Comment #13
pringlz CreditAttribution: pringlz commentedI had success with this great module.
https://www.drupal.org/project/fitvids
Comment #14
cheekysaffer CreditAttribution: cheekysaffer commentedFor 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 #15
alar CreditAttribution: alar commentedComment #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. ;)
Comment #16
yorkshire-pudding CreditAttribution: yorkshire-pudding commentedDitto 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.
Comment #17
RGonski CreditAttribution: RGonski commentedThanks @joncjordan for this #4 css fix. Really saved me a lot of time and effort
Comment #18
newswatch CreditAttribution: newswatch commented#4 saved my life :)
Comment #19
bajah1701 CreditAttribution: bajah1701 commentedIf 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.