встраивать видео YouTube отзывчивого решение

Question

кто может мне помочь, пожалуйста:

Я пытался сделать встраивать видео YouTube и ширину и отзывчивые 100%, я нашел этот код на этом сайте, чтобы попытаться сделать это:

http://avexdesigns.com/responsive-youtube-embed/

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

Html:

<div class="video-container"> 
    <iframe src="http://www.youtube.com/embed/dFVxGRekRSg" frameborder="0" width="560" height="315"></iframe> 
</div> 

С кодом как: видео даже не появляется: Так что я взял переполнение скрытым от кода и изменения «обивка-топ» только «сверху»: толкать видео на голова: видео находится поверх моей страницы, и оно должно быть ниже, где говорится: «Почему дизайн интерьера Кевина Курбаса/смотрите видео ниже?»

Чтобы частично получить видео, как я хочу, чтобы она появилась, я удалить из моего HTML и корректировки IFRAME соответственно:

iframe { 
    width: 100%; 
    top: 5px; 
    margin-bottom: -5px 
} 

видео код из 288-304

http://graph-art.matc.edu/harrisd5/vicom126/a2/index.html

Сделав это, просто сделайте снимок экрана миниатюры youtube отзывчивым, когда видео воспроизводится, это центр. Итак, как я собираюсь сделать это видео на 100% шириной и отзывчивым, сохраняя при этом его соотношение сторон ниже «Почему интерьер интерьера Kevin Kurbs?» ?

Answer 1

В этом случае вы можете использовать рассчитанную высоту для вашего iframe. Он вычисляет из ширины страницы и стандартного соотношения сторон видеоизображения youtube iframe.

iframe { 
    width: 100%; 
    top: 5px; 
    margin-bottom: -5px; 
    height: calc(100vw*(315/560)); 
} 

Answer 2

Когда я делал отзывчивые видео раньше, я использовал этот бит jQuery. Когда размер экрана изменяется, он подсчитывает, какой должна быть высота.

<script>  
var $allVideos = $("iframe[src^='https://player.vimeo.com'], iframe[src^='http://player.vimeo.com'], iframe[src^='https://www.youtube.com'], iframe[src^='http://www.youtube.com'], object, embed"), 


    $allVideos.each(function() { 

     $(this) 
     // jQuery .data does not work on object/embed elements 
     .attr('data-aspectRatio', this.height/this.width) 
     .removeAttr('height') 
     .removeAttr('width'); 

    }); 

    $(window).resize(function() { 



     $allVideos.each(function() { 

     $fluidEl = $(this).parent(); 
     var newWidth = $fluidEl.width(); 

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

     }); 

    }).resize(); 
</script> 

Answer 3

Вот код CSS:

.yt-container { 
    position:relative; 
    padding-bottom:56.25%; 
    padding-top:30px; 
    height:0; 
    overflow:hidden; 
} 
.yt-container iframe, .yt-container object, .yt-container embed { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
} 

И ниже является HTML-код:

<div class="yt-container"> 
    <iframe src="https://www.youtube.com/embed/hfQdkBOxXTc" frameborder="0" allowfullscreen></iframe> 
</div> 

Источник: Make YouTube Embed Video Responsive Using CSS