Jump to content

How to change width of loaded video om different devices?


mstdmstdd

Recommended Posts

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!
Link to comment
Share on other sites

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"

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.