Question

我真的想知道如何做到这一点。我的网站是用Ruby on Rails制作的，但我假设这样做你只需要使用HTML和CSS。

以下是我迄今为止所做的尝试：

视图/布局/ home_layout.html.erb：

`

<body>

    <div class="navbar navbar-inverse navbar-fixed-top" id="navbar">
      <div class="container" id="body">
        <a id="nav" class="navbar-brand" href="/projects">
            <img src="http://i1051.photobucket.com/albums/s423/Kira-Banks/check-2.png" id="logo">
            Checklance
        </a>
      </div>
    </div>

    <div  id="homeContainer">

        <div id="homeVideo">
            <video>
                <source src="trafficLoop.mp4" type="video/mp4">
            </video>
            <div>
            </div>
        </div>

        <%= yield %>
    </div>

    <footer id="footer">Copyright 2014 Kira Banks</footer>

</body>

`

资产/样式表/ pages.css.scss：

`

#homeVideo {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

#homeVideo video {
    position: absolute;
    left: 50%;
    top: 50%;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: 0;
}

#homeVideo div {
    position: relative;
    z-index: 1;
}

`

我的视频文件位于 assets / images / trafficLoop.mp4

Answer 1

最好用的是YTPlayer

将您的视频上传到Youtube，并使用播放器，这是网络上最常见，最佳的全屏背景播放器解决方案。它还兼容所有版本的浏览器

https://github.com/pupunzi/jquery.mb.YTPlayer/wiki

像这样使用

$(function(){
      $(".player").YTPlayer();
    });

使用HTML和CSS将.MP4视频作为背景

1 个答案: