html5 100％無DOCTYPE作品的視頻（videojs）

以下HTML不會導致100％的視頻大小。如果我刪除<!DOCTYPE html>一切工作正常。html5 100％無DOCTYPE作品的視頻（videojs）

<!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版本< 10.

我已經搜索了關於這個問題，發現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; 
}

來源

2013-06-04 nexus

我不」知道確切的詳細原因這是，但我看到，使用doctype html（正確的HTML5文檔類型）HTML頁面的寬度/高度默認情況下不是100％。如果你在你的css中添加以下內容，那應該解決你的問題。

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

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

來源

2013-06-04 18:05:16 heff

我取得了一些成功將其定義CSS和！重要的標記，但是因爲我在twitter引導中使用它，所以使它成爲100％似乎很棘手。 – nexus

我不能說bootstrap如何影響所有這些，但無論video.js是否需要本身具有寬度和高度。 – heff

我會在上面的問題中提供一個可能的解決方案。 – nexus

如果您正在使用Drupal的，我只是編輯的videojs.tpl.php文件，並拿出

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

，並添加width="100%"

來源

2014-03-05 14:59:57 Gaperville

html5 100％無DOCTYPE作品的視頻（videojs）

回答

相關問題