Javascript Video.js-使其具有不同尺寸的响应能力
目前,我有一个Video.js视频播放器,在手机/平板电脑上观看时,我设法使其响应,但在桌面上观看时,视频播放器的宽度/高度与我的容器相同。如何在桌面上指定固定的宽度/高度,并在手机/平板电脑上查看时将其缩小 index.phpJavascript Video.js-使其具有不同尺寸的响应能力,javascript,php,html,css,video.js,Javascript,Php,Html,Css,Video.js,目前,我有一个Video.js视频播放器,在手机/平板电脑上观看时,我设法使其响应,但在桌面上观看时,视频播放器的宽度/高度与我的容器相同。如何在桌面上指定固定的宽度/高度,并在手机/平板电脑上查看时将其缩小 index.php <div class="content"> <video id="my-video" class="video-js vjs-default-skin vjs-16-9 vjs-big-play-centered" contro
<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>
要查看此视频,请启用JavaScript并考虑升级到支持HTML5视频的Web浏览器。
在css中使用媒体查询,并将容器类的宽度和高度更改为固定宽度和高度
/* 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; } }