Сократите видео на YouTube до гибкой ширины

Question

У меня есть видео на YouTube, встроенное на нашем веб-сайте, и когда я сжимаю экран до размеров планшета или телефона, он перестает сокращаться шириной около 560 пикселей. Является ли этот стандарт для видео на YouTube или есть что-то, что я могу добавить в код, чтобы он стал меньше?

Answer 1

Вы можете сделать видео YouTube отзывчивым с помощью CSS. Заверните IFRAME в DIV с классом «videowrapper» и примените следующие стили:

.videowrapper { 
    float: none; 
    clear: both; 
    width: 100%; 
    position: relative; 
    padding-bottom: 56.25%; 
    padding-top: 25px; 
    height: 0; 
} 
.videowrapper iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

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

Answer 2

See full gist here и live example here.

#hero { width:100%;height:100%;background:url('{$img_ps_dir}cms/how-it-works/hero.jpg') no-repeat top center; } 
.videoWrapper { position:relative;padding-bottom:56.25%;padding-top:25px;max-width:100%; } 

---

<div id="hero"> 
    <div class="container"> 
     <div class="row-fluid"> 
      <script src="https://www.youtube.com/iframe_api"></script> 
      <center> 
      <div class="videoWrapper"> 
       <div id="player"></div> 
      </div> 
      </center> 
      <script> 
      function onYouTubeIframeAPIReady() { 
       player = new YT.Player('player', { 
        videoId:'xxxxxxxxxxx',playerVars: { controls:0,autoplay:0,disablekb:1,enablejsapi:1,iv_load_policy:3,modestbranding:1,showinfo:0,rel:0,theme:'light' } 
       }); 
       resizeHeroVideo(); 
      } 
      </script> 
     </div> 
    </div> 
</div> 

---

var player = null; 
$(document).ready(function() { 
    resizeHeroVideo(); 
}); 

$(window).resize(function() { 
    resizeHeroVideo(); 
}); 

function resizeHeroVideo() { 
    var content = $('#hero'); 
    var contentH = viewportSize.getHeight(); 
    contentH -= 158; 
    content.css('height',contentH); 

    if(player != null) { 
     var iframe = $('.videoWrapper iframe'); 
     var iframeH = contentH - 150; 
     if (isMobile) { 
      iframeH = 163; 
     } 
     iframe.css('height',iframeH); 
     var iframeW = iframeH/9 * 16; 
     iframe.css('width',iframeW); 
    } 
} 

resizeHeroVideo вызывается только после того, как игрок Youtube полностью загружена (на странице загрузки не работает), и всякий раз, когда окно браузера изменяется. Когда он запускается, он вычисляет высоту и ширину iframe и присваивает соответствующие значения, поддерживающие правильное соотношение сторон. Это работает независимо от того, изменяется ли окно горизонтально или вертикально.

Answer 3

Я использовал CSS в принятом ответе здесь для своих отзывчивых видеороликов YouTube - отлично работал до тех пор, пока YouTube не обновил свою систему в начале августа 2015 года. Видео на YouTube - это те же размеры, но по какой-либо причине CSS в принятый ответ теперь содержит почтовые ящики всех наших видеороликов. Черные полосы сверху и снизу.

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

.videowrapper { 
    position: relative; 
    padding-bottom: 56.45%; 
    height: 0; 
} 

Answer 4

Это старая нить, но я найти новый ответ на https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

Проблемы с предыдущим решением является то, что вам нужно иметь специальный DIV вокруг видео код, который не подходит для большинства применений. Итак, вот решение JavaScript без специального div.

// Find all YouTube videos - RESIZE YOUTUBE VIDEOS!!! 
var $allVideos = $("iframe[src^='https://www.youtube.com']"), 

// The element that is fluid width 
$fluidEl = $("body"); 

// Figure out and save aspect ratio for each video 
$allVideos.each(function() { 

    $(this) 
    .data('aspectRatio', this.height/this.width) 

    // and remove the hard coded width/height 
    .removeAttr('height') 
    .removeAttr('width'); 

}); 

// When the window is resized 
$(window).resize(function() { 

    var newWidth = $fluidEl.width(); 

    // Resize all videos according to their own aspect ratio 
    $allVideos.each(function() { 

     var $el = $(this); 
     $el 
     .width(newWidth) 
     .height(newWidth * $el.data('aspectRatio')); 

    }); 

// Kick off one resize to fix all videos on page load 
}).resize(); 

// END RESIZE VIDEOS 

Answer 5

Уточнено Решение только для Javascript для YouTube и Vimeo с использованием jQuery.

// -- After the document is ready 
$(function() { 
    // Find all YouTube and Vimeo videos 
    var $allVideos = $("iframe[src*='www.youtube.com'], iframe[src*='player.vimeo.com']"); 

    // Figure out and save aspect ratio for each video 
    $allVideos.each(function() { 
    $(this) 
     .data('aspectRatio', this.height/this.width) 
     // and remove the hard coded width/height 
     .removeAttr('height') 
     .removeAttr('width'); 
    }); 

    // When the window is resized 
    $(window).resize(function() { 
    // Resize all videos according to their own aspect ratio 
    $allVideos.each(function() { 
     var $el = $(this); 
     // Get parent width of this video 
     var newWidth = $el.parent().width(); 
     $el 
     .width(newWidth) 
     .height(newWidth * $el.data('aspectRatio')); 
    }); 

    // Kick off one resize to fix all videos on page load 
    }).resize(); 
}); 

Простой в использовании только врезать:

<iframe width="16" height="9" src="https://www.youtube.com/embed/wH7k5CFp4hI" frameborder="0" allowfullscreen></iframe> 

Или с отзывчивым рамках стиля, как Bootstrap.

<div class="row"> 
    <div class="col-sm-6"> 
    Stroke Awareness 
    <div class="col-sm-6> 
    <iframe width="16" height="9" src="https://www.youtube.com/embed/wH7k5CFp4hI" frameborder="0" allowfullscreen></iframe> 
    </div> 
</div> 

• Полагается по ширине и высоте фрейма, чтобы сохранить соотношение сторон
• Можно использовать соотношение сторон по ширине и высоте (width="16" height="9")
• Ждут, пока документ не будет готов до изменения размера
• Использует JQuery подстроки *= селектор вместо начала строки ^=
• Получает ширину ссылки с видеопамяти iframe вместо предопределенного элемента
• Javascript решение
• Нет CSS
• Нет обертка не требуется

Благодаря @Dampas для начальной точки. https://stackoverflow.com/a/33354009/1011746

Answer 6

Решение @ magi182 является прочным, но ему не хватает возможности устанавливать максимальную ширину. Я думаю, что максимальная ширина 640px необходима, потому что otherwhise миниатюра youtube выглядит pixelated.

Мое решение с двумя обертками работает как шарм для меня:

.videoWrapperOuter { 
    max-width:640px; 
    margin-left:auto; 
    margin-right:auto; 
} 
.videoWrapperInner { 
    float: none; 
    clear: both; 
    width: 100%; 
    position: relative; 
    padding-bottom: 50%; 
    padding-top: 25px; 
    height: 0; 
} 
.videoWrapperInner iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 
<div class="videoWrapperOuter"> 
    <div class="videoWrapperInner"> 
    <iframe src="//www.youtube.com/embed/C6-TWRn0k4I" 
     frameborder="0" allowfullscreen></iframe> 
    </div> 
</div> 

Я также установить отступ-дно во внутренней обертки 50%, потому что с @ magi182 56%, черная полоса сверху и внизу.

Answer 7

Если вы используете Bootstrap, вы также можете использовать отзывчивое вложение. Это полностью автоматизирует процесс реагирования видео (ов).

http://getbootstrap.com/components/#responsive-embed

Там пример кода ниже.

<!-- 16:9 aspect ratio --> 
<div class="embed-responsive embed-responsive-16by9"> 
    <iframe class="embed-responsive-item" src="..."></iframe> 
</div> 

<!-- 4:3 aspect ratio --> 
<div class="embed-responsive embed-responsive-4by3"> 
    <iframe class="embed-responsive-item" src="..."></iframe> 
</div> 

Answer 8

Хорошо, похоже, большие решения.

Почему бы не добавить width: 100%; прямо в ваш iframe. ;)

Так что ваш код будет выглядеть примерно так <iframe style="width: 100%;" ...></iframe>

Попробуйте это, он будет работать, как он работал в моем случае.

Наслаждайтесь! :)

Answer 9

Я делаю это с помощью простого CSS следующим

HTML КОД

<iframe id="vid" src="https://www.youtube.com/embed/RuD7Se9jMag" frameborder="0" allowfullscreen></iframe> 

CSS КОД

<style type="text/css"> 
#vid { 

max-width: 100%; 
height: auto; 

}