Jump to content

How to change width of loaded video om different devices?

Recommended Posts


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>

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.


Share this post

Link to post
Share on other sites

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

Share this post

Link to post
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"

Share this post

Link to post
Share on other sites

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

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


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.