100% 的 html5 视频可以在没有 DOCTYPE 的情况下使用（videojs）答案

【问题标题】：html5 video with 100% works with no DOCTYPE (videojs)100% 的 html5 视频可以在没有 DOCTYPE 的情况下使用（videojs）
【发布时间】：2013-06-04 15:45:50
【问题描述】：

以下 HTML 不会导致视频大小为 100%。如果我删除 <!DOCTYPE html> 一切正常。

<!DOCTYPE html>
<html>
<head>
    <link href="video-js/video-js.css" rel="stylesheet">
    <script src="video-js/video.js"></script>
    <script>videojs.options.flash.swf = "video-js/video-js.swf"</script>
</head>

<body>
    <video id="myVideo" class="video-js vjs-default-skin video-container" width="100%" height="100%" controls autoplay preload="auto" poster="poster.jpg" data-setup="{}">
      <source src="test.mp4" type='video/mp4'/>
    </video>
</body>
</html>

建议为每个 HTML 页面定义一个 DOCTYPE。我可以离开它，但它不适用于 IE 版本

我已经搜索过这个问题并找到了this solutions，但它们不适用于我的 DOCTYPE。

我在这里错过了一些基本的东西吗？

我正在使用 videojs 4.0.3。

编辑：根据提示和对这个问题的回答，我在这里提供了一个解决方案：

<div class="video-container">
    <video id="myVideo" class="video-js vjs-default-skin" controls autoplay preload="auto" poster="poster.jpg" data-setup="{}">
      <source src="video.mp4" type='video/mp4'/>
    </video>
</div>

以及对应的css：

body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.video-container {
  width: 100%;
  height: 100%;
}

.video-js {
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  z-index: 1;
}

【问题讨论】：

标签： css html html5-video video.js

【解决方案1】：

我不知道为什么会这样的确切细节，但我看到使用 doctype html（正确的 HTML5 doctype）时，html 页面的宽度/高度默认不是 100%。如果您在 css 中的某处添加以下内容，那应该可以解决您的问题。

html, body { width: 100%; height: 100% }

示例：http://jsbin.com/uyelud/1/edit

【讨论】：

我用 CSS 和 !important 标记定义它取得了一些成功，但由于我在 twitter bootstrap 中使用它，所以让它 100% 出现似乎很棘手。
我无法说明 bootstrap 会如何影响这一切，但无论 video.js 内部是什么，它本身都需要有一个宽度和高度。
我会在上面的问题中提供一个可能的解决方案。

【解决方案2】：

如果您使用的是 Drupal，我刚刚编辑了 videojs.tpl.php 文件并取出了

width="<?php print $width; ?>"

并添加width="100%"

【讨论】：