How to change width of loaded video om different devices?

[mstdmstdd]

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>

in css of device :

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

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 online 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!

[requinix]

Use CSS with media queries to adjust widths according to device size and possibly orientation. Or use scaled units like percent or vw.

[mstdmstdd]

Could you, please, be more detailed? maybe with refs to similar example ?

[mstdmstdd]

Could you, please, be more detailed? maybe with refs to similar example ?

 

I know how to read width of the current device with viewport like that

function getDevice() {
    var viewport = {
        width: $(window).width(),
        height: $(window).height()
    };
    if (typeof param != "undefined") {
        if (param.toLowerCase() == 'width') {
            return viewport.width;
        }
        if (param.toLowerCase() == 'height') {
            return viewport.height;
        }
    }
    return viewport;
}

and depending on width of the device to set width of the video container with JS ...

But that is good for width, but what with height. If there is no width/height set I can not set valid height parameters and it can not be any value like "auto"

[requinix]

The easiest solution is to use vw units. Use CSS to set a width on the video element. Adjust the width number accordingly.