video.js - width="100%" height="100%" 不起作用？答案

【问题标题】：video.js - width="100%" height="100%" is not working?video.js - width="100%" height="100%" 不起作用？
【发布时间】：2018-07-07 00:52:45
【问题描述】：

<body>

<link href="//mysite.com/player/video-js/video-js.min.css" rel="stylesheet">
<link href="//mysite.com/css/op.css" rel="stylesheet">

<script src="//mysite.com/video-js/video.min.js"></script>

<div align="center">
<video id="myvideo" class="video-js vjs-default-skin vjs-big-play-centered" controls
 preload="auto" poster="IMG-LINK"
data-setup="{}">
 <source src="VIDEO-LINK" type="video/mp4" width="100%" height="100%">
</video>

</body>

如何使用 JW Player 解决此问题与无法 100% 全屏显示的 Video.js 完美配合

【问题讨论】：

如果我没记错的话，宽度和高度必须应用于video 而不是source，并且值必须以像素为单位。在此处查看更多信息：w3schools.com/tags/att_video_width.asp
像这样工作，但样式 css 不再工作了，现在是简单的视频

标签： javascript php html iframe

【解决方案1】：

试试这个方法：

<video style="width: 100%; height: 100%" id="myvideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" poster="IMG-LINK" data-setup="{}">
 <source src="VIDEO-LINK" type="video/mp4">
</video>

【讨论】：

【解决方案2】：

只需使用fluid 选项

<video class="video-js" data-setup='{"fluid": true}'>
    <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
</video>

【讨论】：

【解决方案3】：

如果您将 width="100%" height="100%" 放在“video”标签而不是“source”标签中，它将起作用。

<video id="myvideo" class="video-js vjs-default-skin vjs-big-play-centered" controls
 preload="auto" poster="IMG-LINK"
data-setup="{}" width="100%" height="100%">
 <source src="VIDEO-LINK" type="video/mp4">
</video>

【讨论】：

感谢您的帮助，但这不起作用 width="100%" height="100%"

【解决方案4】：

<body>

<link href="//mysite.com/player/video-js/video-js.min.css" rel="stylesheet">
<link href="//mysite.com/css/op.css" rel="stylesheet">

<script src="//mysite.com/video-js/video.min.js"></script>

<div align="center">
<video id="myvideo" class="video-js vjs-default-skin vjs-big-play-centered" controls
 preload="auto" poster="IMG-LINK"
data-setup="{}">
 <source src="VIDEO-LINK" type="video/mp4" width="100%" height="100%">
</video>

</body>

<video id="myvideo" class="video-js vjs-default-skin vjs-big-play-centered" controls
 preload="auto" poster="IMG-LINK"
data-setup="{}" width="100%" height="100%">
 <source src="VIDEO-LINK" type="video/mp4">
</video>

请检查我附上的图片。

【讨论】：