Ответственный встроенный фон Видео полный экран

Я использую Bootstrap и задавался вопросом, можете ли вы встроить видео в качестве фона, но заполнить весь экран, точно так же, как с изображением, центрируя его при изменении размера, но всегда в полноэкранном режиме ,Ответственный встроенный фон Видео полный экран

Я выражаю себя очень плохо, поэтому я подготовил this, чтобы вы поняли, чего я хочу.

Теперь, я пытаюсь сделать то же самое с embedded video, но я не знаю, как это сделать.

HTML

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
<div class="container-fluid"> 
<div class="embed-responsive embed-responsive-16by9"> 
    <div id="background"> 
     <iframe id='player' width="2500" height="1406" src="https://www.youtube.com/embed/Rk6_hdRtJOE?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1&amp;loop=1&amp;playlist=Rk6_hdRtJOE&amp;enablejsapi=1&version=3" frameborder="0"></iframe> 
    </div> 
</div>   
</div>

CSS

#background { 
    position: absolute; 
    top:0; 
    left:0; 
    z-index: -999; 
    width: 100%; 
    height: 100%; 
}

UPDATE

Я хотел бы получить что-то вроде this. Когда вы изменяете размер окна, видео адаптировано для заполнения экрана, независимо от того, что оно горизонтально, оно появляется только в видео. Это было сделано с тегом «video», я использую «iframe».

источник

2015-05-06 Fernando

тест таким образом.

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
<div class="container-fluid"> 
    <div class="embed-responsive embed-responsive-16by9"> 
     <div id="background"> 
      <iframe id='player' width="100%" height="100%" src="https://www.youtube.com/embed/Rk6_hdRtJOE?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1&amp;loop=1&amp;playlist=Rk6_hdRtJOE&amp;enablejsapi=1&version=3" frameborder="0"></iframe> 
     </div> 
    </div>   
</div>

CSS

html, body{ height: 100%; margin: 0; padding: 0;} 
#background { 
    position: absolute; 
    top:0; 
    left:0; 
    z-index: -999; 
    width: 100%; 
    height: 100%; 
} 
.container-fluid{margin: 0; padding: 0; height: 100%;} 
.embed-responsive{height: 100%;}

источник

2015-05-06 18:19:41

Это совершенно то же самое. Попробуйте в jsfiddle, скопируйте свой код, и вы увидите. Спасибо за попытку. – Fernando

Я хочу, когда вы изменяете размер, так как пиксели видео и окна не совпадают, видео должно отображаться частично по ширине, но всегда на 100% высоте. – Fernando

Прохладный этот трубчатый! Пример, который я опубликовал, не был тем же http://jsfiddle.net/m86kndsx/, это ваш http://jsfiddle.net/0e89mjLp/ . Существует проблема из-за черной полосы сверху и снизу из-за разрешения видео. Но теперь я понимаю, что вы хотели, содержание видео с высотой 100%. –

мне удалось сделать это благодаря tubular.

Вам просто нужно добавить в вашем теле есть Div тег с идентификатором "обертку" и называть их функции в JS:

HTML

<div id="wrapper"></div>

$().ready(function() { 
    $('#wrapper').tubular({videoId: 'idOfYourVideo'}); // where idOfYourVideo is the YouTube ID. 
});

источник

2015-05-06 23:28:44 Fernando

Ответственный встроенный фон Видео полный экран

ответ

Смежные вопросы