Backgrounds video là một thứ mà chúng ta thấy ngày càng nhiều trên web, đây là một cách tuyệt vời để cải thiện giao diện trang web của bạn, khiến nó trở nên hấp dẫn hơn đối với khách truy cập trang. Bài viết này sẽ cố gắng hướng dẫn bạn cách thêm nền video bằng mã đơn giản và cũng chia sẻ với bạn một đoạn mã bổ sung về cách thực hiện bằng cách sử dụng Framework Bootstrap 3.

Ý tưởng là dặt video trên nền như một hình ảnh. Vấn đề ở đây là không thể sử dụng quy tắc CSS như chúng ta vẫn làm với các ảnh nền vì vậy chúng tôi sẽ phải tìm một cách khác.

The HTML Code

Đây là đoạn mã HTML có liên quan cho ví dụ. sử dụng thẻ <video>

<video autoplay loop muted poster="screenshot.jpg" id="background">
    <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>

CSS Code

#background {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(polina.jpg) no-repeat;
    background-size: cover;
}
.container h1 {
    color: white;
}

Bonus – Twitter Bootstrap integration Nếu sử dụng Boostrap, đây là đoạn mã ví dụ

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  </head>
<body>
 <video autoplay loop muted poster="screenshot.jpg" id="background">
   <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
 </video>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>www.viewlike.us</h1>
     </div>
    </div>
  </div>
</body>
</html>

Demo: http://codepen.io/anon/pen/zGwjQb Nguồn : https://www.viewlike.us/learn/how-to-css-html-5-fullscreen-video-background-bootstrap-integration/