4

I currently use the Video filter module to embed Youtube videos in my posts, but on mobile devices the videos are not responsive. They still maintain their width no matter how narrow the screen is.

I am open to another method of embedding videos even raw HTML and Javascript if the video displays will be responsive

Improve this question
4
  • The provided module link is not working. Just need to check if you could set the width of iframe rendered to show the video. If you can add the width to the iframe just set it to 100%. Now apply width by css(media) on wrapper div you have added to show the video, the same width will be applied to the iframe.
    – Puneet
    Commented Dec 19, 2016 at 5:58
  • I have correct the link for the Video filter module. I don't think it has the option for setting the width of the iframe. Do some other video embedding modules have that option?
    – vfclists
    Commented Dec 19, 2016 at 6:04
  • I have made that by using custom template file for the content type. For responsive video you can try this YouTubeField
    – Puneet
    Commented Dec 19, 2016 at 9:33
  • This answer here on this page below works for Drupal 9 (9.0.7) as I've explained in my comment following it: drupal.stackexchange.com/a/223371/1082
    – therobyouknow
    Commented Nov 11, 2020 at 18:48

3 Answers 3

Reset to default
4

We use Fitvids in combo with Video filter to make youtube videos responsive. You can either add the JS yourself or use the Drupal module version, it works either way.

In the case of using the Drupal module, you'll add the video filter HTML selector to the UI for fitvids and then your video will be responsive.

For example, on my site, I have a video using video filter:

[VIDEO::https://www.youtube.com/watch?v=y0bA_KH-D-I]

... and then in the video filter UI, I have added the slector for the video here:

/admin/config/media/fitvids

In my case video filter is using embedded-video as its wrapper HTML element so I added .embedded-video to the fitvids UI in Drupal.

For more info see:

Improve this answer
3
  • It works fine on mobile phones as the screens are small, but on desktops the video expands to fill the whole width. Is there a way to set the maximum size of the video so that it doesn't become too big on desktops or laptops? The video gets too grainy when viewed in a large size.
    – vfclists
    Commented Dec 21, 2016 at 0:18
  • Some of that depends on the container the video is in. You could set a max-width container around the video and that should fix it.
    – Danny Englander
    Commented Dec 21, 2016 at 2:10
  • 1
    Thanks, max-width together with margin:0, auto fixed that issue
    – vfclists
    Commented Dec 21, 2016 at 15:36
4

You can simply use CSS to apply responsiveness (I believe the correct term here is "fluid-width"), given that the Aspect Ratio of your videos are uniform (16:9 OR 4:3). The trick is a simple "Padding" trick using percentages. I've made a demo here with a youtube iframe embed which is made responsive: https://jsfiddle.net/scg6n55h/

Try moving the window borders to resize the preview window. The video should resize along with the window. Hopefully the fiddle is enough?

If you'd like to read more about it, here's the article where I originally got this idea from: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

Improve this answer
1
  • 1
    +1 upvote. I found this nicely simple html and css solution in jsfiddle.net/scg6n55h to work in Drupal 9 (9.0.7). I used the html in the solution in an ordinary formatted long html field (full html edit input mode enabled) and the I put the css from the solution in its own css file and declared it in my custom theme. Thank you so much. I love modules and the fitvids solution which is available for D9 I'm sure is nice, but always good to try out various solutions!
    – therobyouknow
    Commented Nov 11, 2020 at 18:47
2

While I haven't used the Video Filter module (I prefer to use a separate media field), by far the easiest tool that I've used for responsive videos is Bootstrap's Responsive Embed. Here are details on how it works: http://getbootstrap.com/components/#responsive-embed

If your theme is based on Bootstrap, the core of what you need is already built-in. If not, you can generate a customized Bootstrap download that includes just the Responsive Embed styles and add it to your theme. You would then add the appropriate classes to your template.

The other option is to add some CSS (and possibly a little JS) to your theme. Here's my favorite tutorial on doing that: https://css-tricks.com/rundown-of-handling-flexible-media/

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.