Как адаптировать видео с 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>

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

Понравилась статья? Поделиться с друзьями:
Комментариев: 20
  1. Руслан

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

    1. Лифанов Валентин (автор)

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

      1. Руслан

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

        1. Лифанов Валентин (автор)

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

  2. Андрей

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

    1. Лифанов Валентин (автор)

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

  3. Андрей

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

  4. Сергей

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

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

    1. Лифанов Валентин (автор)

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

  5. Марина

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

    1. Лифанов Валентин (автор)

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

  6. Марина

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

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

    между ними ссылка 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%;
    }

    1. Лифанов Валентин (автор)

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

  7. Максим Бойко

    Спасибо за пост и решение проблемы. Я полтора года мозг парил, нигде найти инфу не мог. Сейчас воспользовался и всё сработало.

    1. Лифанов Валентин (автор)

      Рад был помочь.

  8. Алексей

    всё это хорошо, только 90%, указанные в статье, мне не подойдут. Видимо придётся подбором искать эту цифру. На моём сайте изображения сжимаются под ширину мобильного устройства, а видео, к сожалению, нет. В результате Яндекс.Вебмастер ругается, что сайт не адаптирован для мобильных устройств. Не знаю, именно из-за видео или по другой причине. Надо как-то ширину ролика автоматически подстраивать под ширину экрана.

    1. Лифанов Валентин (автор)

      Ну исходя из вашего сайта прописанного в имени, то он у вас вообще не адаптирован.

      1. Алексей

        горизонтальная прокрутка только из-за видео. Google считает адаптированным, Яндекс нет. Вы с мобильного устройства смотрели?

  9. Алексей

    Если Вы судите по адаптации, исходя из доменного имени, то конечно, спорить сложно :twisted: Вы ставите 90%, а для какого устройства?
    У Вас тут заголовок есть… «Лучшие блогИ», поправьте, Валентин.

    1. Лифанов Валентин (автор)

      Про видео на вашем блоге, оно у меня отображается нормально, экран едет из за чего-то другого надо удалять элементы по очереди чтобы узнать причинный элемент. Я специалист именно в адаптации, а не в замене файлов и тому остальному при загрузке с разных устройств. Мой блог подстраивается под разные расширения а не под устройства, в этом смысл адаптивного дизайна. Меняйте домен и ставьте либо вордпресс либо джумлу, с блогспотом много не проживешь. Во поводу заголовка, он правильный, то есть это лучшие комментаторы моего блога, просто не люблю длинные заголовки.

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

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

13 queries in 0,260 seconds.