3

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

  • 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 Dec 19 '16 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 Dec 19 '16 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 Dec 19 '16 at 9:33
3

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:

  • 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 Dec 21 '16 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 Dec 21 '16 at 2:10
  • 1
    Thanks, max-width together with margin:0, auto fixed that issue – vfclists Dec 21 '16 at 15:36
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/

1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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