Отзывчивое полноэкранное видео с YouTube без черных баров?

Ответ 1

• Проверьте это: Полноэкранное видео без черных границ
• Или это: http://avexdesigns.com/responsive-youtube-embed/
• Или этот: http://css-tricks.com/fluid-width-youtube-videos/

Ответ 2

Это довольно старый, но люди все еще могут нуждаться в помощи здесь. Мне тоже это нужно, поэтому я создал Pen своего решения, которое должно помочь - http://codepen.io/MikeMooreDev/pen/QEEPMv

В этом примере показаны две версии одного и того же видео, одна стандартная и вторая обрезанная и выровненная по центру, чтобы соответствовать размеру полного родительского элемента, не отображая отвратительные черные полосы.

Вам нужно использовать некоторый javascript для вычисления новой ширины для видео, но это очень просто, если вы знаете соотношение сторон.

HTML

<div id="videoWithNoJs" class="videoWrapper">
  <iframe src="https://www.youtube.com/embed/ja8pA2B0RR4" frameborder="0" allowfullscreen></iframe>
</div>

CSS. Высота и ширина видеообъектива могут быть любыми, они могут быть процентами, если вы этого пожелаете.

.videoWrapper {
  height:600px;
  width:600px;
  position:relative;
  overflow:hidden;
}

.videoWrapper iframe {
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    bottom:0;
}

JQuery

$(document).ready(function(){
    // - 1.78 is the aspect ratio of the video
    // - This will work if your video is 1920 x 1080
    // - To find this value divide the video native width by the height eg 1920/1080 = 1.78
    var aspectRatio = 1.78;

    var video = $('#videoWithJs iframe');
    var videoHeight = video.outerHeight();
    var newWidth = videoHeight*aspectRatio;
    var halfNewWidth = newWidth/2;

    video.css({"width":newWidth+"px","left":"50%","margin-left":"-"+halfNewWidth+"px"});

});

Это также можно активировать при изменении размера, чтобы он оставался отзывчивым. Самый простой (возможно, не самый эффективный) способ сделать это состоит в следующем.

$(window).on('resize', function() {

    // Same code as on load        
    var aspectRatio = 1.78;
    var video = $('#videoWithJs iframe');
    var videoHeight = video.outerHeight();
    var newWidth = videoHeight*aspectRatio;
    var halfNewWidth = newWidth/2;

    video.css({"width":newWidth+"px","left":"50%","margin-left":"-"+halfNewWidth+"px"});

});

Ответ 3

Создайте контейнер div вокруг кода iframe и присвойте ему класс, например:

<div class="video-container"><iframe.......></iframe></div>

Добавьте в CSS:

.video-container {
    position:relative;
    padding-bottom:56.25%;
    padding-top:30px;
    height:0;
    overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

Этот сайт coolestguidesontheplanet.com является исходным URL этого ответа.

Ответ 4

Чтобы симулировать тот же эффект, важно сохранить соотношение сторон 16: 9.

HTML

<div class="banner-video">    
        <iframe  src="https://www.youtube.com/embed/XXlJXRXJhow?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1&amp;mute=1&amp;loop=1&amp;playlist=XXlJXRXJhow" frameborder="0" allow="autoplay; encrypted-media" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
</div>

CSS

iframe{
  width: 100%;
  height: calc((100vw*9) /16);
}

Это удалит черные полосы.

Теперь мы можем установить внешний контейнер на 100% ширины и 100% высоты и скрыть переполнение.

.banner-video{
  height: 100vh;
  overflow: hidden;
}

Теперь приведенный выше код будет работать до тех пор, пока соотношение сторон окна просмотра не станет больше 16/9. Поэтому мы должны добавить медиа-запрос на основе соотношения сторон.

 @media (max-aspect-ratio: 16/9) {
    .banner-video{
      width: 100%;
      overflow: hidden;
    }

    iframe{
      width: calc((100vh*16)/9);
      height: 100vh;
      }
  }

После этого видео на YouTube сохранит полный размер области просмотра при любых условиях и скроет лишнюю часть видео. Другое, тогда опера поддерживается во всех браузерах.

Ответ 5

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

    var vidRatio = vidWidth/vidHeight;
var wrapperHeight = $('#videoIFrameContainer').height();
var wrapperWidth = $('#videoIFrameContainer').width();
var wrapperRatio = wrapperWidth / wrapperHeight;
if(wrapperRatio < vidRatio){
    var newWidth  = wrapperWidth  * (vidRatio/wrapperRatio);
    $('#videoIFrame').css({'min-height':wrapperHeight+'px', 'min-width':newWidth+'px', 'position':'absolute', 'left':'50%','margin-left':'-'+(newWidth/2)+'px'});

}
else{
    var newHeight  = wrapperHeight   * (wrapperRatio / vidRatio);
    $('#videoIFrame').css({'min-height':newHeight+'px', 'min-width':wrapperWidth+'px', 'position':'absolute', 'top':'50%','margin-top':'-'+(newHeight/2)+'px'});

}

Ответ 6

Я потратил много времени, пытаясь понять это, но здесь простое решение CSS, которое работает для меня с помощью Flexbox. В основном, поместите видео в контейнер с абсолютной положением, шириной и высотой 100% и сделайте его отображаемым: согните и центрите контент!

https://medium.com/@rishabhaggarwal2/tutorial-how-to-do-full-screen-youtube-video-embeds-without-any-black-bars-faa778db499c

Ответ 7

К сожалению, это, похоже, не работает... Если я чего-то не хватает: http://codepen.io/Archie22is/pen/EWWoEM

jQuery(document).ready(function($){
    // - 1.78 is the aspect ratio of the video
    // - This will work if your video is 1920 x 1080
    // - To find this value divide the video native width by the height eg 1920/1080 = 1.78
    var aspectRatio = 1.78;

    var video = $('#videoWithJs iframe');
    var videoHeight = video.outerHeight();
    var newWidth = videoHeight*aspectRatio;
    var halfNewWidth = newWidth/2;

    video.css({"width":newWidth+"px","left":"50%","margin-left":"-"+halfNewWidth+"px"});

});

Ответ 8

Вы также можете использовать это ниже: -

<iframe class="" style="background:url(ImageName.jpg) center; background-size: 100% 140%; " allowfullscreen="" width="300" height="200"></iframe>

Ответ 9

Если вы ищете только CSS (без JS).

Видео с соотношением сторон 16: 9, например, 1920x1080 или 1280x720...

Вот мой код (это работает в моем случае):

.video {
    position: relative;
    height: 0; 
    padding-bottom: 56.25%; /*16:9*/
    padding-top: 0; /* Use ZERO, not 25px or 30px and so on */
    overflow: hidden;
}

.video > iframe {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}