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