Как адаптировать видео с youtube на своем блоге

Дата: / Автор поста:

адаптация роликов с ютуба под мобильные устройства
Привет всем на блоге wpsovet.ru. Это наверное будет последний урок в рубрике «мобильный блог», потому что вроде как все аспекты разобрал. У многих у нас есть ролики на блога, и в основном они с ютуба, но они не особо адаптивны и их плохо смотреть с мобильников, как это устранить читайте дальше.

Разбор проблемы.

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

не правильная адаптация видео на сайте

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

правильная

Наверное озадачил, но давайте разбираться в ситуации, все решается двумя строчками стилей и внедрением их в само окошко видео.

Составляем и внедряем классы и стили.

Смотрите внимательно, вот вам сам код стилей (только не смейтесь, да он супер маленький).

.youtube{width:90%;}

Его надо вставить, куда вы думаете? Правильно в style.css, идем в редактор и в любое место, а лучше в самый низ его и вставляем, смотрим на скриншот и действуем. Все ключевые моменты отмечены красным цветом.

стили адаптивного видео

Почему я взял 90%, потому что если бы на все 100, то видео упиралось бы в края окна, а так оно не зависимо от размера будет занимать девяносто процентов ширины области конента.

Соединяем класс с самим видео.

Я не знаю как вы берете с ютуба, я просто беру на прямую ссылку html и вставляю ее на сайт, все показано на скриншоте. Так намного проще и надежнее, зачем изобретать велосипед, если обо всем позаботился гугл.

код с ютуба

Вот так выглядит та ссылка, которую я скопировал с сервиса.

<iframe src="https://www.youtube.com/embed/iplOKalBwis" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

А вот к этой я уже прописал тот класс, котрый до делали в файле стилей.

<iframe class="youtube" src="https://www.youtube.com/embed/iplOKalBwis" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

В итоге я просто беру и вставляю этот код в статью, во вкладке текст, куда мне надо и все готово, и если все сделано правильно, то статья и видео будут одинаково отображаться на маленьких экранах.
где прописывать код с ютуба
На этом все если у вас будут вопросы, то жду вас в комментариях.

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(5 голосов, в среднем: 4.2 из 5)

С уважением к читателям Лифанов Валентин.

Нажмите на кнопку социальных сетей, вам не сложно, а мне приятно.

Комментарии к этой супер статье.

  • Руслан

    Как раз то что мне нужно в скором будущем! Спасибо, как всегда все доступно и понятно! ;-)

    • Лифанов Валентин

      Руслан, только советую тебе свой канал завести намного полезнее будет, ты много знашь по своей теме.

      • Руслан

        Так видео вставлял по твоей рекомендации — все получилось с первого раза :), на планшете проверил — все гут!

        Канал завел — а вот видео некогда делать, и там уже другой подход надо, хотя задумок полно!

        Кстати — ты не знаешь как делают youtube.com/watch?v=8d8WNxgmcWM&index=1&list=LLYTlb0wkT1U_L5fP6bS99YQ такое видео? Ну очень мне понравилось! P.S. Я про стиль и оформления ролика!

        • Лифанов Валентин

          Руслан, не незнаю, с ютубом так постольку поскольку, некогда его изучать, но я предполагаю что эта фича платная.

  • Андрей

    Валентин, придется все видосы править на блоге. Или есть ещё фишка?

    • Лифанов Валентин

      Нет фишки кончались, править ручками и еще раз ручками :)

  • Андрей

    ОК, работаем ручками)

  • Сергей

    Нужно было адаптировать youtube видео для лендинга. И ваша статься очень помогла.

    Спасибо огромное! Все получилось. Короткая, понятная и главное практически полезная статья.

    • Лифанов Валентин

      Сергей спасибо, две строчки CSS и все в порядке.

  • Марина

    Спасибо за такую полезную статью как раз искала пути решения после смены шаблона на адаптивный видео при просмотре в смартфоне обрезано наполовину :twisted: Буду пробовать ;-)

    • Лифанов Валентин

      Пожалуйста был рад помочь.

  • Марина

    К сожалению ваш метод описанный в статье на моем сайте не сработал. Сработало вот это. Хотите опубликуйте может кому поможет в адаптации видео с ютуб

    Это вставляется там где будет видео на странице

    между ними ссылка HTML с ютуба

    в стили CSS вставляем этот код

    .video-block {

    position: relative;

    padding-bottom: 56.25%;

    padding-top: 30px;

    height: 0;

    overflow: hidden;

    }

    .video-block iframe {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    }

    • Лифанов Валентин

      Здравствуйте, не сработал потому что у вас был спор с другими стилями. Ваши стили 99% не пойдут у остальных, для адаптации большинства надо лишь прописать проценты длины и ширины. Как верстальщик я этот код не взял бы. Спасибо за дополнение Марина, ваш комментарий очень классный :)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Лифанов Валентин. ©2014 Все права защищены. Полное или частичное копирование запрещено.