Вопрос по css, html, youtube – Как сделать YouTube встроенным видео на всю ширину страницы?

13

Вот's скрипка к коду:http://jsfiddle.net/dLPa8/

Если вы прокрутите вниз, тамвидео с YouTube. Что мне нужно, это должно охватывать всю высоту и ширину страницы. Я имею в виду, что это должно выглядеть как первый раздел (в скрипке).

Я попробовал это:


Это решило проблему в определенной степени, но видео цепляется за верхнюю часть страницы, используяiframe, Как я могу сделать высоту раздела видео полной высотой страницы?

Ага. Вид на весь экран. Ranveer
Этот парень написал хороший урок для отзывчивых видео на YouTubeavexdesigns.com/responsive-youtube-embed koningdavid
1 страница означает одну коробку 1920x1080 (или 1366x768 или любую другую) Ranveer
@koningdavid это сработало! Благодарю. Ranveer
Полная страница, которую вы имеете в виду, ВЕСЬ страница? Нравится полный экран? Wagner Leonardi

Ваш Ответ

2   ответа
27

FIDDLE

<iframe id="video" src="//www.youtube.com/embed/5iiPC-VGFLU" frameborder="0" allowfullscreen=""></iframe>


$(function(){
  $('#video').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' });

  // If you want to keep full screen on window resize
  $(window).resize(function(){
    $('#video').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' });
  });
});
Чтобы удалить полосу прокрутки просто используйтеbody { overflow: hidden; } или жеbody { overflow-x: hidden; } сохранить вертикальную прокрутку, если у вас есть больше элементов на странице. Я'Мы обновили скрипку. mdesdev
Как заставить это ТОЛЬКО адаптироваться к ширине, а не к высоте, но при этом сохранять соотношение? mizuki
0

Попробуйте использоватьinnerHeight или же :.clientHeight

var doc = document, bod = doc.body, dE = doc.documentElement;
var wh = innerHeight || dE.clientHeight || bod.clientHeight;

var wh теперь содержит высоту окна, без полосы прокрутки.

Похожие вопросы