В статье рассмотрим актуальную тему, это по созданию адаптивного видео, где также касается вставка от хостинг Youtube. И нужно сделать красивое изображение, которое аналогично сделаем адаптивным, что на всех мобильных носителях, вы посмотрите корректное видео, и рассмотрите все картинки, что аналогично все отлично будет смотреться.
Теперь давайте сосредоточимся на очень важном аспекте современного веб-сайта, где по средствах массовой информации, таких как видео или изображения.
Приведенный ниже код CSS гарантирует, что ваши изображения никогда не будут больше, чем их родительский контейнер. Это очень просто и работает для большинства адаптивных сайтов. Для правильного функционирования этот фрагмент кода должен быть вставлен в таблицу стилей CSS.
CSS
Код
img { max-width: 100%; height: auto; }
Хотя описанная выше техника эффективна, иногда вам может потребоваться больший контроль над изображениями и отображение другого изображения в соответствии с размером дисплея клиента.
Переходим к основе, где начнем с HTML:
Код
<img src="image.jpg"
data-src-600px="image-600px.jpg"
data-src-800px="image-800px.jpg"
alt="">
Как видите, мы использовали атрибут data-* для хранения заменяющих URL изображений. Теперь давайте использовать всю мощь CSS3, чтобы заменить изображение по умолчанию одним из указанных замещающих изображений, если выполняется min-device-width условие:
Код
@media (min-device-width:600px) {
img[data-src-600px] {
content: attr(data-src-600px, url);
}
}
@media (min-device-width:800px) {
img[data-src-800px] {
content: attr(data-src-800px, url);
}
}
На этом все!
Теперь давайте посмотрим на другое очень важное средство массовой информации на современных веб-сайтах, это видео.
Поскольку большинство веб-сайтов используют видео с сайтов третьих сторон, таких как YouTube или Vimeo.
Этот метод позволяет сделать встроенное видео адаптивным.
HTML
Код
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/JxpelF7y4Lc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
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%;
}
После того, как вы применили этот код на своем веб-сайте, то встроенные видео стали адаптивными для мобильных аппаратов.
