Early Bird Registration for DrupalCon Portland 2024 is open! Register by 23:59 PST on 31 March 2024, to get $100 off your ticket.
Is there anyway to set the Video Player width with auto-detected device width so that same configuration can be used with various PC and mobile devices?
Comments
Comment #1
Wheels35 CreditAttribution: Wheels35 commentedI was able to use a similar approach that I used for inline videos by utilizing a flexible css code. I tossed this into the end of my css file and it made the video completely responsive(scaling) depending on the size of the window it was played in.
Comment #2
very_random_man CreditAttribution: very_random_man commentedI use the FitVids Jquery plugin to scale the player to the container. It works really well! :-)
Just include jquery.fitvids.js in your theme and add this bit of js:
$(".embedded-video", context).fitVids();
http://fitvidsjs.com/
Comment #3
maxplus CreditAttribution: maxplus commentedThanks,
fitvids indeed works very well, but I did use the module https://www.drupal.org/project/fitvids instead of including it in my own theme.
Comment #4
AdamPS CreditAttribution: AdamPS at AlbanyWeb commentedThe CSS approach (#1) is a nice and simple. However note that it fixes an aspect ratio of 16:9 so it would stretch a 4:3 video. The module approach (#3) uses JS to remove that problem.
Here is some slightly different CSS, based on an respected website:
I worry that the line "padding-top: 30px;" in #1 would distort the aspect ratio slightly.