• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Адаптивное видео с изображением на CSS (Как создать адаптивное видео для сайта с помощью CSS)
Адаптивное видео с изображением на CSS
Kosten
Дата: Понедельник, 2019-08-19, 22:47 | Сообщение 1
Онлайн
Администраторы
Сообщений:25236
Награды: 57


В статье рассмотрим актуальную тему, это по созданию адаптивного видео, где также касается вставка от хостинг 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%;
}

После того, как вы применили этот код на своем веб-сайте, то встроенные видео стали адаптивными для мобильных аппаратов.
Прикрепления: 3606694.png(47.7 Kb) · 5150420.jpg(16.3 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Адаптивное видео с изображением на CSS (Как создать адаптивное видео для сайта с помощью CSS)
  • Страница 1 из 1
  • 1
Поиск: