我想在全屏视频上放置HTML格式的文字。
我可以让它不全屏，但它不能全屏工作。
有什么办法吗？
我使用position:absoulute文本和position:relative/fixed/none视频。
此外，我不知道它是否有效，但我打电话给.requestFullscreen();函数不幸，我无法调整视频大小。
如果.requestFullscreen();是有效的。我需要调整视频大小。
视频标签的宽度和高度正在发生变化，但视频不会发生变化。
您可以使用iframe将Youtube和vimeo作为响应，并使用对象嵌入来嵌入Viddler和Blip.tv。有一篇文章解释它here和代码可在github上获得
Youtube的示例代码（使用jquery）：
// Find all YouTube videos
var $allVideos = $("iframe[src^='//www.youtube.com']"),
// The element that is fluid width
$fluidEl = $("body");
// Figure out and save aspect ratio for each video
$allVideos.each(function() {
$(this)
.data('aspectRatio', this.height / this.width)
// and remove the hard coded width/height
.removeAttr('height')
.removeAttr('width');
});
// When the window is resized
$(window).resize(function() {
var newWidth = $fluidEl.width();
// Resize all videos according to their own aspect ratio
$allVideos.each(function() {
var $el = $(this);
$el
.width(newWidth)
.height(newWidth * $el.data('aspectRatio'));
});
// Kick off one resize to fix all videos on page load
}).resize();
之前有过这个问题，但最终它的代码非常简单（我花了很长时间才弄清楚并得到正确的平衡）https://jsfiddle.net/tonytansley/xwuuttdt/
只需要一点绝对定位，并使用百分比作为宽度高度和填充。
<body>
<div id="outer">
<div id="home-top-video">
<video autoplay loop width="100%">
<source src="http://view.vzaar.com/2710053.mp4" type="video/mp4"/>
<source src="http://view.vzaar.com/2710053.ogg" type="video/ogg"/>
<source src="http://view.vzaar.com/2710053.webm" type="video/webm"/>
Your browser does not support the video tag. We suggest you upgrade your browser.
</video>
<div id="home-text">
<h1>text</h1>
<h3>subtext</h3>
</div>
</div>
</div>
</body>
CSS
#outer{
width:100%;
display:block;
text-align:center;
position:relative;
overflow: hidden;
height:10000px;
min-height:100%;
}
#home-top-video{
left:0%;
top:0%;
height:100%;
width:100%;
overflow: hidden;
position: absolute;
z-index: -1;
}
#home-text{
left:0%;
top:0;
height:100%;
width:100%;
padding-top:10%;
overflow: hidden;
position: absolute;
z-index: 0;
color:white
}
您可以通过几种不同的方式实现这一目标。我相信最简单的方法是创建一个宽度为100％的div，将视频反过来嵌入div中，然后将文本绝对放在div的中心。
我找到了解决方案。这完全是关于z-index。这是css：
#video{ position: relative; }
#text{ position: absolute; z-index: 2147483647;
}
谢谢你的回答。