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

Wheels35’s picture

I 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.

.player {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.player iframe,  
.player embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
very_random_man’s picture

I 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/

maxplus’s picture

Component: User interface » Code

Thanks,
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.

AdamPS’s picture

The 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:

/* Responsive video with fixed aspect ratio 16:9. */
/* See https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php */
.embedded-video .player {
  position: relative;
  padding-top: 56.25%; /* =16/9 */
}
.embedded-video .player iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

I worry that the line "padding-top: 30px;" in #1 would distort the aspect ratio slightly.