How to change width of loaded video om different devices?

Hello!

I use https://videojs.com/ library in my
laravel 5.7 / Blade / jquery /Bootsrap 4.1 app and the question is if there is a way to change width of loaded video depending on device to fit parent div for video block?
This plugin give possibility to set width/height automatically (It is commented now in the code below) I tried to wrap the video block with div with set width(or max-width) :

<div class="row">
<div class="block_container_internal">

{{--width="640" height="264"--}}
<video id="video_page_content_{{ $nextPageContentVideo->id }}" class="video-js" controls preload="auto" poster="/images/video_poster.jpg" data-setup="{}">
<source src="{{ $next_video_url }}" type='video/mp4'>
<source src="{{ $next_video_url }}" type='video/webm'>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>

</div>
</div>

HTML:

in css of device :

.block_container_internal {
width: 390px !important;
padding-right: 5px;
padding-left: 5px;
}

Code (CSS):

but anyway video block get all width of the screen. I reviewed the docs on the site, but did not find any options

I uploaded this problem http://votes.nilov-sergey-demo-apps.tk/about

Please look at ipad device : https://imgur.com/a/GPXm3gi As I do not want to show video at full possible with,
I would like to change width of video container with wrapping div, but failed.

Thanks!

 

You need to know the aspect ratio you want the player to show at, and then use a little... trick. Let's say you want 16:10 aspect. (good for 16:9 + controls)

<div class="videoContainer">
  <video blah blah blah></video>
</div>

Code (markup):

The CSS would be:

.videoContainer {
  position:relative;
  width:100%; 
  height:0;
  padding-bottom:62.5%;
}

.videoContainer video {
  position:absolute;
  width:100%;
  height:100%;
}

Code (markup):

Curious quirk of CSS is that height-wise padding in percentages is based on the width. So by setting 100% width on the container we can get 62.5% of that as the height by using padding instead of height. We can then absolute position the video inside the container giving us our desired sustained aspect ratio. Just divide the height by the width to get the percentage you need -- 10 / 16 == 0.625 == 62.5%. So 4:3 aspect ratio is 75%. 16:9 is 56.25%.

That's usually how it's done. Nice part is it can then be dynamically scaling to width, so you don't even have to media query it for specific sizes. Just set a max-width so the player doesn't get too big, and be done with it.

Remember, HTML itself is actually responsive out of the gate, so let things be fluid before you start screwing around throwing media queries at it or flipping the bird at accessibility norms by declaring things in pixels.