Скажите пожалуйста, как сделать видео бэкграундом с youtube, с фиксированной высотой без ущерба ширине? Чтобы было адаптивно.
2 ответа
Вот работающий пример. ID видео добавляется непосредственно в скрипт. Можно задать несколько видео, время старта и окончания.
Отредактируете класс .cover под ваши нужды, задав ему позицию relative и высоту с фиксированным значением, и готово.
var tag = document.createElement('script');
tag.src = 'https://www.youtube.com/player_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var tv,
playerDefaults = {autoplay: 0, autohide: 1, modestbranding: 0, rel: 0, showinfo: 0, controls: 0, disablekb: 1, enablejsapi: 0, iv_load_policy: 3};
var vid = [
{'videoId': 'iNJdPyoqt8U', 'startSeconds': 15, 'endSeconds': 290, 'suggestedQuality': 'hd720'},
{'videoId': '0wCC3aLXdOw', 'startSeconds': 465, 'endSeconds': 657, 'suggestedQuality': 'hd720'}
],
randomvid = Math.floor(Math.random() * (vid.length - 1 + 1));
function onYouTubePlayerAPIReady(){
tv = new YT.Player('tv', {events: {'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange}, playerVars: playerDefaults});
}
function onPlayerReady(){
tv.loadVideoById(vid[randomvid]);
tv.mute();
}
function onPlayerStateChange(e) {
if (e.data === 1){
$('#tv').addClass('active');
} else if (e.data === 0){
tv.seekTo(vid[randomvid].startSeconds)
}
}
function vidRescale(){
var w = $(window).width()+200,
h = $(window).height()+200;
if (w/h > 16/9){
tv.setSize(w, w/16*9);
$('.tv .screen').css({'left': '0px'});
} else {
tv.setSize(h/9*16, h);
$('.tv .screen').css({'left': -($('.tv .screen').outerWidth()-w)/2});
}
}
$(window).on('load resize', function(){
vidRescale();
});
$('.hi span').on('click', function(){
$('#tv').toggleClass('mute');
if($('#tv').hasClass('mute')){
tv.mute();
} else {
tv.unMute();
}
});
@import "http://fonts.googleapis.com/css?family=Exo+2:100,300,300italic,500,500italic,700,700italic&subset=latin,cyrillic";
body {
background: #000;
font-family: 'Exo 2',sans-serif;
}
a {
color: #ff0;
}
.cover {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
}
.cover .hi {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 24px;
line-height: 26px;
text-align: center;
}
.cover .hi span {
cursor: pointer;
text-decoration: underline;
}
.tv {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
overflow: hidden;
}
.tv .screen {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
margin: auto;
opacity: 0;
transition: opacity .5s;
}
.tv .screen.active {
opacity: 1;
}
<div class="cover">
<div class="hi">Тут может быть расположен ваш контент</div>
</div>
<div class="tv"><div class="screen mute" id="tv"></div>
</div>
Всё довольно просто, ставите html код на вашей странице:
<div class="video-background">
<div class="video-foreground">
<iframe src="https://www.youtube.com/embed/W0LHTWG-UmQ?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=W0LHTWG-UmQ" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
И соотвецтвенно стиль для ваших классов:
* { box-sizing: border-box; }
.video-background {
background: #000;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -99;
}
.video-foreground,
.video-background iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
@media (min-aspect-ratio: 16/9) {
.video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
.video-foreground { width: 300%; left: -100%; }
}