javascript - Should VideoJS controls (CC, audio) appear below the video element when width gets narrow? -
when width of video narrow, videojs controls in lower right (e.g., cc, audio, etc.) appear below video element on page. can demonstrated on videojs.com home page narrowing browser window , hovering on video see controls. i've tried on ie 11 , chrome same result.
is expected behavior? if so, there simple way in css and/or javascript control/detect/calculate minimum width @ occur, can prevent video element width getting small enough have controls appear below video element? of videos have cc tracks, don't. have enabled playbackrates control, don't.
i use following code resize 16:9 videos, ideally i'd enforce minimum width here, if possible:
videojs("embvid", { "height": "auto", "width": "auto" }).ready(function () { // video player object. var videoplayer = this; // player's parent element. var parent = document.getelementbyid(videoplayer.id()).parentelement; // video's aspect ratio (hd). var aspectratio = 9 / 16; function resizevideojs() { // find parent's current width. var width = parent.offsetwidth; videoplayer.width(width).height(width * aspectratio); } // initialize size calling once. resizevideojs(); // call again on every resize event. window.onresize = resizevideojs;}); edit: videojs home page uses:
<script src="//vjs.zencdn.net/4.12.5/video.js"></script> and pages use:
<script src="http://vjs.zencdn.net/4.12/video.js"></script> both version demonstrate same behavior on both chrome , ie 11.
i wrapped video element in div and, through experimentation, set min-width 385px in div. prevents video element getting narrow enough have controls appear below element when there cc , playbackrates control. i'd prefer not have hard-coded. i'd rather calculate appropriate minimum width based on actual threshold, if that's possible.
you have hide overflow in controlbar
.vjs-control-bar { overflow: hidden; } i setup example fiddle here: http://jsfiddle.net/kuhmaty9/2/
Comments
Post a Comment