Please tell me how to make a video background from youtube, with a fixed height without compromising the width? To be adaptive.

2 answers 2

Here is a working example. The video ID is added directly to the script. You can set several videos, start and end time.

http://codepen.io/pen/KrmdAG

Edit the .cover class to fit your needs, giving it a relative position and a height with a fixed value, and you're done.

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>

    It's pretty simple, put the html code on your page:

     <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>

    And appropriately for your classes:

     * { 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%; } }