CODEWITHSUNDEEP
javascriptphphtmlcssvideo.js
xenazfire
xenazfire

Reputation: 63

Video.js - Making it responsive in different sizes

Currently I have a Video.js video player and I managed to make it responsive when viewing it on mobiles/tablets but when I viewed it on desktop the video player stretches to the same width/height as my container. How do I specify a fixed width/height on desktop and scaled it smaller when I viewed in on mobiles/tablets?

index.php

<div class="content">
            <video id="my-video" class="video-js vjs-default-skin vjs-16-9 vjs-big-play-centered" controls preload="auto" poster="" data-setup="{}">
                <source src="video.mp4" type='video/mp4'>

                <p class="vjs-no-js">
                    To view this video please enable JavaScript and consider upgrading to a web browser that supports HTML5 video.</a>
                </p>
            </video>
</div>

Upvotes: 2

Views: 1197

Answers (1)

Josh Stevens
Josh Stevens

Reputation: 4221

use a media query in css and change your container class width and height to a fixed one

    /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
    @media (min-width:481px) { /* css in here */ }

   /* tablet, landscape iPad, lo-res laptops ands desktops */
    @media (min-width:961px) { /* css in here */ }

    /* Desktop up */
    @media (min-width:1025px) { .container { width: 300px; height:300px; } }

Upvotes: 4

Related Questions