HTML Встроенное видео отключено

Question

Я пытаюсь вставить видео с YouTube на свой сайт. Мне интересно, есть ли способ связать ширину и высоту в зависимости от размера окна. Например, на iPhone он выглядит примерно как THIS. Могу ли я уменьшить ширину видео до размера дисплея? Могу ли я каким-то образом связать свой отзывчивый сайт?

Он отлично работает на компьютерах или других крупных экранированных устройствах, но не на мобильных устройствах.

Источник:

<center><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/zRDi1DT3AFA?rel=0" frameborder="0" allowfullscreen></iframe></center> 

Full page source

Спасибо за помощь!

[редактировать: источник]

Answer 1

можно вставлять Youtube видео реагирующего с помощью переопределения стиля Youtube (CSS).

Добавьте следующий CSS:

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

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

А затем обернуть iframe с div:

<div class="video-con"> 
    <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/zRDi1DT3AFA?rel=0" frameborder="0" allowfullscreen></iframe> 
</div>