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

Popular posts from this blog

shopping cart - Page redirect not working PHP -

php - How to modify a menu to show sub-menus -

python - Installing PyDev in eclipse is failed -