ZorNet.Ru — сайт для вебмастера » HTML и CSS » Адаптивное видео в рамке ноутбука CSS

Адаптивное видео в рамке ноутбука CSS

Здесь идет встроенное видео от youtube, которое находится в виде каркаса на CSS, где элементы адаптивные для просмотра с разных размеров экрана. А точнее добавляем свое видео на YouTube с помощью стильной рамки для ноутбука CSS. Это отличное решение для разных сайтов, где можно предоставить видео ролик в красивом оформление, которое просто не возможно пропустить.

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

Адаптивный стиль дизайна автоматически помогает адаптироваться к любым размерам и на любом типе устройства. Поэтому нам нужен был адаптивный код для вставки YouTube. Можно было бы подумать, что видео со 100% шириной будет автоматически изменять размер в окружающем контейнере.

Если рассматривая с большого размера, то видим такой обзор:

И сразу переходим на самый небольшой экран мобильного телефона:

Встроить адаптивно видео с ютуба в картинку - HTML, CSS

Установочный процесс:

HTML

Код

CSS

Код

.prosmotr-kadra-video {
  width: 100%;
  max-width: 736px;
  margin: 10px auto;
}
.video-rodiki-karkase-portala {
  position: relative;
  padding-bottom: 45%;
  padding-top: 0;
  height: 0;
  overflow: hidden;
  -webkit-border-image: url('http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/pervy-karkas.png') 50 233 112 228 stretch stretch;
  -moz-border-image: url('http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/vtoroy-karkas.png') 50 233 112 228 stretch stretch;
  -o-border-image: url('http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/treti-karkas.png') 50 233 112 228 stretch stretch;
  border-image: url('http://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/chetvert.png') 50 233 112 228 stretch stretch;
  border-color: rgba(0, 0, 0, 0);
  border-width: 27px 76px 55px 76px;
  border-style: inset;
}
.video-rodiki-karkase-portala iframe, .video-rodiki-karkase-portala object, .video-rodiki-karkase-portala embed {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #ddd;
}
@media (max-width: 500px) {
.video-rodiki-karkase-portala {
  border-width: 20px 62px 40px 62px;
}
@media all and (max-width: 400px) {
.video-rodiki-karkase-portala {
  border: none !important;
}
}

Что безусловно станет для многих интересно, но главное, что сам обвод каркаса идет в адаптивной верстке, где вы устанавливая плеер можете посмотреть как на большом мониторе, но на самом малом экране он автоматически исчезает, где остается один плеер.

По мере того, как все больше компаний начинают включать видео и другие медиа в свою маркетинговую стратегию, отзывчивость на разных устройствах может стать проблемой. К счастью есть простой и удобный способ сделать видео YouTube и другие встроенные мультимедиа отзывчивыми в блоге вашего сайта.

И здесь как раз отличное решение, чтоб все сделать доступным по видео, но главное все выглядит красиво по дизайну. Вообще все можно посмотреть на demo странице, как в реальности будет выглядеть такое видео решение, как предоставление ролика в оригинальном оформлении.

Демонстрация

30 Июля 2019 Загрузок: 1 Просмотров: 2141 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0