Просто подумал, что кому-то будет интересно узнать, как встраивать iframe YouTube или любое видео 16: 9 (например, живой виджет Twitch, Vimeo и т. Д.)
YouTube обычно дает вам видео фиксированного размера width="560"
height="315"
. Но обычно люди хотят встроить его в полную ширину, чтобы он выглядел хорошо, а также отзывчивым
Но установив его на 100vw, вы просто испортите сайт, так как он выходит из контейнера, а также высота не может быть определена.
Таким образом, iframe должен иметь ширину 100% в зависимости от контейнера, что можно сделать, просто добавив width="100%"
. Но высота все еще испорчена, установка на 100% не будет работать.
И это должно работать, когда зритель меняет размер экрана, перемещая телефон из вертикального в горизонтальное положение или увеличивая окна.
Всего 3 ответа
Итак, вот решение, которое я придумаю с помощью JavaScript. Проблема, которую мы имеем здесь, состоит в том, что высота не может быть определена без знания ширины, и, поскольку ширина является динамической, нет способа жестко кодировать высоту.
Мы можем получить ширину элемента, используя JavaScript, с его помощью мы можем вычислить высоту, используя соотношение сторон 16: 9 для стандартного видео. Конечно, вы можете изменить соотношение сторон на другое, но обычно видео на YouTube поставляется с соотношением сторон 16: 9.
Этот код сделает iframe полной шириной в соответствии с его контейнером. Это означает, что если тело 100px, а контейнер 80px, если iframe находится в контейнере, ширина будет 80px. Там не будет выходить из контейнера и портить адаптивный дизайн.
Этот код будет изменять размер iframe каждый раз, когда страница загружается или изменяется, обеспечивая постоянное соотношение сторон 16: 9. Большинство людей могут использовать телефон для просмотра и убедиться, что его размер изменяется, когда телефон перемещается из вертикального в горизонтальное положение.
Вот как это сделать:
window.addEventListener("load", playerSizer); /* Resize on load */
window.addEventListener("resize", playerSizer); /* Resize on change in window size */
/* Resize function */
function playerSizer() {
var player = document.getElementById("player"); /* Element ID */
var width = player.offsetWidth; /* Get width */
player.style.height = (width * 0.5625) + "px"; /* Aspect ratio */
}
<center>
<!-- Remember to change your YouTube URL -->
<!-- Note width="100%", this will be used to calculate height -->
<!-- Note id="player", this will be used by JavaScript function -->
<iframe
id="player"
width="100%"
src="YOUR URL"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
Your browser does not support this, try viewing it on YouTube: YOUR URL
</iframe>
</center>
Вот код, если вы не хотите отделять JavaScript от HTML:
<center>
<iframe id="player" width="100%" src="YOUR URL" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>Your browser does not support this, try viewing it on YouTube: YOUR URL</iframe>
</center>
<script>
window.addEventListener("load", playerSizer);
window.addEventListener("resize", playerSizer);
function playerSizer() {
var player = document.getElementById("player");
var width = player.offsetWidth;
player.style.height = (width * 0.5625) + "px";
}
</script>
Надеюсь, это поможет ?
Лично, когда мне приходится иметь дело с встраиванием видео на YouTube, я использую fitVidsJS , я просто помещаю код встраивания в div с шириной, которую я хочу, чтобы видео отображалось, и затем вызываю fitVids (), которая позаботится об этом, сохраняя : 9 формат изображения и управление им, когда пользователь изменяет размер страницы.
Короче говоря, код будет выглядеть так: не забудьте загрузить fitVidJs на свою страницу
$(document).ready(function(){
$('.youtube-video').fitVids();
});
.youtube-video{
width: 85%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="youtube-video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
Я использовал эту систему для нескольких проектов до сих пор и никогда не было проблем, она также поддерживает другие видео платформы, но я использовал ее только с YouTube
Я знаю, что этот вопрос помечен с помощью JavaScript, но с CSS решение намного проще. Все, что вам нужно сделать, это обернуть видео, встроенное в div, и применить CSS.
<div class="videoWrapper">
<!-- Video embed goes here -->
</div>
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
overflow: hidden;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}