How to make a video adaptive?

Hello,

You should be able to do so by applying width and height in CSS.
Example here: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

See also: #1927318: CSS DIV class around the embedded Video

Thanks

@leramulina I just tried to add width: 100% and height auto via Developer tools and it worked. Not sure how you're trying to implement this. Some code example would be helpful.

Hi @leramulina glad you were able to fix this. I am closing this ticket.

Thanks!

Hi! I've tried leramulina's css, to no avail.

Then also tried the following in my bootstrap theme css:

video {
  width: 100%    !important;
  height: auto   !important;
}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

also tried ..

.video .video-filter .video-youtube .iframe {
  width: 100%;
  height: auto;
}

.. still no happiness. Would you be so kind to point us in the right direction on how to get the video to play as adaptive on different devices?

Most appreciated :)

I've used that technique many times successfully, but percentages provided in that tutorial never work for me. I'm not sure why.

However, the css code is dependent upon the aspect-ratio of the video being embedded. So, theoretically, it should be possible to include all of the CSS except for the "padding-bottom" line in a CSS file with the module, and then embed an inline css in the containing div with just that one line. It would be necessary to extract the height/width from the token, with a fallback of using the configuration options set in the input filter. While I can't really imagine someone wanting their video to not be responsive, it seems prudent to me to add an option to include the extra CSS.

@Liliplanet, it's too complicated for me to troubleshoot without being able to inspect the HTML and CSS. If you can give a link to where you have your code running, I'll look at it and see if I can figure out why it's not working.

One thing that happens in a Wysiwyg is the removal of the <div class="video-filter"> because of limited html element rules.

I really don't want to give people access to DIV, so I rewrote template to use span, and I styled the class .video-filter as display: block

I used this code in my site to display YouTube videos at 100% of the available space - so the video scales down as the space available shrinks:

.video-filter {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}

.video-filter iframe,
.video-filter object,
.video-filter embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

if the video-filter class is being stripped by your WYSIWYG configuration, you could edit the text format, although in my site (based on Opigno) there is a Video Filter setting in the Text Filter options - with that enabled, the video-filter class is left in place.