Question

我想将文字放在HTML全屏视频上。

我可以将它设为非全屏，但它不能在全屏上工作。

有什么办法吗？

我使用position:absoulute表示文字，position:relative/fixed/none表示视频。

此外，我不知道它是否有效，但我为浏览器调用了.requestFullscreen();功能，我无法调整视频大小。

如果.requestFullscreen();有效。我需要调整视频大小。

视频标签的宽度和高度正在发生变化，但视频不会发生变化。

Answer 1

您可以使用iframes与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();

Answer 2

之前遇到过这个问题，但最后这个代码非常简单（我花了很长时间才弄清楚并得到正确的平衡）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
}

Answer 3

您可以通过几种不同的方式实现这一目标。我认为最简单的方法是创建一个100％宽度的div，将视频反应性地嵌入div中，然后将文本绝对放在div的中心。

Answer 4

我找到了解决方案。这完全是关于z-index。这是css：

#video{ position: relative; }
#text{  position: absolute; z-index: 2147483647;
}

感谢您的回答。

在全屏视频上放置文字（HTML5）

4 个答案: