YouTube video background

За раздвижване на страницата можем да ползваме видео като фон на цялата страница или определена секция от нея.
Ето как с може да се сложи за фон клипче от youtube.

bg_container {
 margin: 80px 0 40px 0;
 height: 300px;
 overflow: hidden;
 position: relative;
 background: $opposite-color;
 padding: 100px 0;
}
 
#bg {
 width: 100%;
 height: 900px;
 position: absolute;
 top: -300px;
}
 
#content {
 position: absolute;
 top: 0px;
 padding: 30px;
}
 
.fade {
 opacity: 0.2;
}

Ето и css

bg_container {
 margin: 80px 0 40px 0;
 height: 300px;
 overflow: hidden;
 position: relative;
 background: $opposite-color;
 padding: 100px 0;
}
 
#bg {
 width: 100%;
 height: 900px;
 position: absolute;
 top: -300px;
}
 
#content {
 position: absolute;
 top: 0px;
 padding: 30px;
}
 
.fade {
 opacity: 0.2;
}

 
И всичко е готово 🙂

Оставете коментар

Design To HTML от Стайл нет