6360 Web Working 6 Июня 2017



Как сделать видео в качестве фона сайтаCSS 3

В текущей статье мы поговорим о том, как установить видео в качестве фона для сайта (video background).

HTML

<section class="video-container">  
   <div class="callout">
     <h1>Object-Fit 👍</h1>
     <div>The CSS Background-Size: Cover for Inline Images &amp; Videos</div>
   </div>
 </section>


CSS


/*** T H E - M A G I C - O F - O B J E C T - F I T ***/
.video-container {   height: 50vh;   position: relative;   overflow: hidden;   @media(min-width: 600px) {     height: 100vh;   } } video {   object-fit: cover; // Set the magic   position: absolute;   height: 100%;   width: 100%;   top: 0;   left: 0; }
/*** A E S T H E T I C S ***/ * {   box-sizing: border-box; } body {   background: #333;   color: white; } .video-container:after {   content: '';   display: block;   height: 100%;   width: 100%;   position: absolute;   top: 0;   left: 0;   background: rgba(black, .2);   z-index: 1; } h1 {   text-transform: uppercase;   font-weight: 900;   margin: 0 0 1rem;   padding: 0;   line-height: 1;   font-family: Futura, Helvetica, sans-serif;   font-size: 5vw;   @media (max-width: 400px) {     font-size: 22px;   }   @media (min-width: 1200px) {     font-size: 75px;   } } .callout {   position: relative;   display: flex;   justify-content: center;   align-items: center;   flex-direction: column;   height: 100%;   text-align: center;   position: relative;   z-index: 10; }


See the Pen Daily Pen #80 by oleg kobrin (@olegkobrin) on CodePen.

Демо

Рейтинг:

Поделится с друзьями:

Вы можете оставить свой комментарий:


98

материалов о web-разработке

1345

читателей нашего блога

15

городов и стран

96

разработанных проектов