Отображение видео YouTube с iframe на всю ширину страницы [закрыто]

Я разместил видео на своем сайте, используя iframe с YouTube, в то время как iframe полная ширина (100%) видео очень мало (высота) в кадре. Как сделать так, чтобы он соответствовал ширине контейнера?

код: 

<iframe width="100%" height="100%" src="https://www.youtube.com/embed/5m_ZUQTW13I" frameborder="0" allowfullscreen></iframe>

скриншот

enter image description here

9
css html iframe youtube

3 ответов

чтобы сделать видео You Tube полной шириной и сохранить высоту (и сохранить ее отзывчивой), вы можете использовать следующую настройку.

HTML с видео

<div class="videoWrapper">
    <!-- Copy & Pasted from YouTube -->
    <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

в CSS

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
30

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

решение для этого-выяснить собственную ширину / высоту вашего видео и сделать небольшую математику, чтобы выяснить, какая высота должна быть при ширине экрана 100%. Предполагая, что это 1920x1080, вы можете сделать что-то вроде этого, используя ширину видового экрана (vw). Вы можете сократить 100vw в соответствии лучше, если вы не хотите, чтобы он буквально заполняет весь экран.

iframe{
 width: 100vw
 height: calc(100vw/1.77);
}
8

используйте полноэкранный атрибут:

<html>
 <body>
  <iframe id="myFrame" src="http://www.youtube.com/embed/W7qWa52k-nE" frameborder="0" allowfullscreen></iframe>
 </body>
</html>

Если это не сработало, то также включите следующий код css:

#myFrame{
position:relative;
top:0;
left:0;
width:100%;
height:100%;
-1