CODEWITHSUNDEEP
javascriptresponsive-designbootstrap-4
mstdmstd
mstdmstd

Reputation: 626

How to change width of loaded video om different devices?

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

MODIFIED # 2

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

Please look at ipad device : https://i.sstatic.net/AvpXk.jpg 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!

Upvotes: 0

Views: 70

Answers (1)

user2054381
user2054381

Reputation:

You can try 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 ...

Upvotes: 1

Related Questions