» Адаптивное видеоплеер для сайтов с помощью CSS

Адаптивное видеоплеер для сайтов с помощью CSS

Как нередко при применении встроенного видео из разных источников у себя на веб-сайте либо блоге, вам доводилось подгонять размер такого либо другого ролика, предварительно изменяя данные значения ширины и вышины плеера? Мыслю, что большая часть блогеров конкретно этак и поступают, раз за разом, в ручную прописывают нужные характеристики, для такого чтоб встроенное видео никак не уходило за край блока, в котором оно размещено.
А так как есть достаточно простое и красивое решение, значительно облегчающее данный процесс. Для реализации абсолютной отзывчивости встраиваемого видео чрез iframe, object и embed с популярных видео-сервисов, таковых как YouTube, Vimeo и остальных.

Для такого чтоб видео автоматом подстраивалось под габариты родительского блока, достаточно в таблице стилей CSS, заранее сотворить единичный класс и найти все нужные характеристики для сотворения «резинового» контейнера, в котором и станет в следующем размещаться интегрированный видеоролик. А этак как видео-сервисы дают разные способы вставки видео на интернет-сайт, iframe, object и embed, надлежит учитывать данную особенность, и установить стили для всех данных разновидностей сходу. Тем наиболее в предстоящем, мы спасем себя от излишних и ненадобных телодвижений.

1 Вариант



.video-responsive { 
  position: relative; 
  padding-bottom: 56.25%; 
  width: 90%;
  margin: 0 auto;
  height: 0; 
  overflow:hidden; 
} 
 
.video-responsive iframe, 
.video-responsive object, 
.video-responsive embed {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%;
  height: 100%; 
}


Как видите всё совсем элементарно, задаём условное размещение для родительского блока и безусловное относительно родителя, для интегрированных частей, определив им при данном, процентные значения ширины width: 100%; и вышины height: 100%;, чтоб в результате видеоплеер сумел вытягиваться либо сокращаться в согласовании объемов главного контейнера.

Со стилями разобрались, остаётся сотворить div контейнер с предопределенным классом, в нашем случае наверное class="video-responsive", потом вделать вовнутрь данного контейнера код подходящего вам ролика, и всю данную систему ткнуть вслед за тем в каком месте вы намереваетесь показывать ваши и посторонние видео-шедевры)).

<div class="video-responsive">
  <iframe width="auto" height="auto" src="ссылка на видео" frameborder="0" allowfullscreen></iframe>
</div>



Все ваши видео встанут по-настоящему отзывчивыми(резиновыми) и станут просто видоизменяться в зависимости от размеров родительских блоков, а этак ведь при просмотре на экранах различных пользовательских устройств.

2 Вариант



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%;
}


HTML



<div class="video-container">
    <iframe src="https://angelalex.ru/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
</div>


Cоздаем фиксированную ширину + резиновый принцип



CSS



.video-wrapper {
    width: 600px;
    max-width: 100%;
}


HTML



<div class="video-wrapper">
    <div class="video-container">
        <iframe src="https://angelalex.ru/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
    </div>
    <!-- /video -->
</div>
<!-- /video-wrapper -->



От себя я установил на Порталеhttps://angelalex.ru/ 2 Вариант почему то мне больше понравился https://angelalex.ru/mobile/

Чтоб отображался плеер нормально совет под мобильные и планшетные девайсы Вам стоит задуматься о создании для них специальной платформы с перелинковкой на нее .

Как это зделать читаем

Как перенаправить пользователей мобильных устройств на другую страницу причём сделать это с можно помощью jаvascript

Я использовал Вариант Перенаправление на мобильную версию сайта в HTML (jаvascript)
Так как на основном портале данное произведение не работает и в итоге по советам Умных людей в https://angelalex.ru/ был создан подкаталог https://angelalex.ru/mobile/
тоесть копия вашего двига со всеми шаблами
Единственное в файле /mobile/engine/data/dbconfig.php прописываем все с основного сайта
и не забываем в шаблоне по исправлять все ссылки


И да код притерпел небольшие изменения в частности размер
width="800" height="450"
на
width="350" height="240"


Для того чтоб не мучатся ссылками прописал доп поля

Итог моей конструкции в файле fullstory.tpl



[xfgiven_video]
  <div class="video-wrapper">
     <div class="video-container">
        <iframe src="[xfvalue_video]" width="350" height="240" frameborder="0"></iframe>
     </div>
     <!-- /video -->
  </div>
 <!-- /video-wrapper -->
            
[/xfgiven_video]
 


В CSS вкидываем такой код




.video-wrapper {
    width: 600px;
    max-width: 100%;
}
.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%;
}


Новость для таких как Я которые мало что понимают но много хотят)))


САМОЕ ЧИТАЕМОЕ / КОММЕНТИРУЕМОЕ
  1. Explzh 7.77
  2. Пять проблем, которые могут проявиться при выращивании томатов
  3. ЕС и США возбудили уголовные дела против Петра Порошенко
  4. Сводки с Фронта ДНР за 24 - 25 Марта 2019 г
  5. Военным России предоставят своего собственного мобильного оператора
  6. Пoрядкa 90 cпopтсменoв Дoнбacca откpыли в Дoнецке мacштaбный фестивaль бopьбы
  7. Порошенко обвинил Медведчука и Бойко в желании посадить Украину на «российскую газовую иглу»
  8. Неопытный врач повредила внутренние органы роженицы, дернув за пуповину. Девушка скончалась в муках.
  9. Премьер-министр России встретился с Медведчуком и Бойко
  10. В ДНP уcилят кoнтpoль зa пpoизвoдствoм и oбopoтом aлкоголя и табaчныx изделий.
В Москве похоронили певицу Юлию Началову
В Москве похоронили певицу Юлию Началову
Церемония прощания прошла в ритуальном зале Троекуровского кладбища. В Москве на Троекуровском кладбище похоронили известную Читать далее
В Москве умерла певица Юлия Началова.
В Москве умерла певица Юлия Началова.
Российская певица Юлия Началова скончалась 16 марта в Москве в возрасте 38 лет, сообщила представительница артистки Анна Исаева. Читать далее
Вера Брежнева отказалась считать себя украинской певицей
Вера Брежнева отказалась считать себя украинской певицей
Певица Вера Брежнева призналась в интервью на Youtube-канале "Эмпатия манучи", что не считает себя украинской певицей. Ведущий Читать далее
Юлия Началова впала в состояние комы. У нее начали отказывать внутренние органы
Юлия Началова впала в состояние комы. У нее начали отказывать внутренние органы
Певица Юлия Началова находится в состоянии искусственной комы. Об этом в среду, 13 марта, сообщила PR-менеджер исполнительницы Читать далее
Все новости Шоу
Любовь похожа на прошедший дождь
Любовь похожа на прошедший дождь
Когда-то Акира Татибана серьёзно занималась лёгкой атлетикой, но была вынуждена оставить спорт из-за травмы. Теперь жизнь Читать далее
Мост в звездное небо [ТВ]
Мост в звездное небо [ТВ]
Братья Хосино приезжают в небольшой городок Ямабико, чтобы младший, 13-летний Аюму, поправил здоровье, а старший, 17-летний Читать далее
Девы Галилея
Девы Галилея
Действие разворачивается в 2061 году. На носу новый ледниковый период. Трое потомков Галилео Галилея - сёстры Ходзуки, Хадзуки и Читать далее
Восхождение Героя щита
Восхождение Героя щита
Иватани Наофуми затворник. Все свои дни он обычно проводил за играми и мангой. Но внезапно, неожиданно для себя, Иватани Читать далее
Все Аниме
«    Март 2019    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031
Галерея новостей
ЕС и США возбудили уголовные дела против Петра Порошенко
ЕС и США возбудили уголовные дела против Петра Порошенко
Военным России предоставят своего собственного мобильного оператора
Военным России предоставят своего собственного мобильного оператора
Порошенко обвинил Медведчука и Бойко в желании посадить Украину на «российскую газовую иглу»
Порошенко обвинил Медведчука и Бойко в желании посадить Украину на «российскую газовую иглу»
Неопытный врач повредила внутренние органы роженицы, дернув за пуповину. Девушка скончалась в муках.
Неопытный врач повредила внутренние органы роженицы, дернув за пуповину. Девушка скончалась в муках.
Премьер-министр России встретился с Медведчуком и Бойко
Премьер-министр России встретился с Медведчуком и Бойко
Пропавший 9-летний мальчик, которого искали сотни людей, спал у друга дома, а пока его искали от переживаний умерла его бабушка.
Пропавший 9-летний мальчик, которого искали сотни людей, спал у друга дома, а пока его искали от переживаний умерла его бабушка.
Парень отправил в нокдаун двоих собутыльников своей девушки
Парень отправил в нокдаун двоих собутыльников своей девушки
Россия готовится к массовой выдаче паспортов жителям Донбасса.
Россия готовится к массовой выдаче паспортов жителям Донбасса.
Митинг Петра Порошенко на Западной Украине обернулся дракой
Митинг Петра Порошенко на Западной Украине обернулся дракой
В Ростовской области 16-летняя школьница родила в туалете и спрятала малыша в пакет и выбросила
В Ростовской области 16-летняя школьница родила в туалете и спрятала малыша в пакет и выбросила
Владимир Зеленский: Сторонники Новороссии – зомби. Нужна информационная война против ЛДНР.
Владимир Зеленский: Сторонники Новороссии – зомби. Нужна информационная война против ЛДНР.
В Сорочинске бывший муж в порыве злости сбил на большой скорости свою экс возлюбленную.
В Сорочинске бывший муж в порыве злости сбил на большой скорости свою экс возлюбленную.
Аптеки Мариуполя развернули торговлю наркотиками
Аптеки Мариуполя развернули торговлю наркотиками
По России пройдет акция за признание ДНР и ЛНР
По России пройдет акция за признание ДНР и ЛНР
На Урале молодая девушка с парнем зарезала свою семью
На Урале молодая девушка с парнем зарезала свою семью