Легко создавайте адаптивные коды для встраивания
Каждый веб-дизайнер знает, как вставлять видео. Встраивание — это самый простой способ поделиться контентом и улучшить свои статьи с помощью соответствующих средств массовой информации.
Однако есть проблема с iframes и другими подобными встраиваемыми видео: отсутствие адаптивных решений. Каждый современный сайт полностью адаптивен, и фиксированное видео действительно может нарушить этот поток на мобильных устройствах.
Чтобы противостоять этой проблеме, попробуйте Embedresponsively.com, Это бесплатное веб-приложение автоматически генерирует встраиваемые коды для широкого спектра медиа-сайтов и даже поддерживает стандартные элементы iframe.
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
Читайте также: HTML5 видео: 10 вещей, которые нужно знать дизайнерам
По умолчанию вы можете выбрать из нескольких мультимедийных сайтов, которые поддерживают встроенные встраивания:
- YouTube
- Vimeo
- DailyMotion
- щебет
- Карты Гугл
- Soundcloud
- Скрибд
Вам не нужно запоминать все эти коды для встраивания или связываться с их виджетами для встраивания. Просто скопируйте URL-адрес любого элемента, который вы хотите встроить, и вставьте его в веб-приложение.
После того, как вы нажмете кнопку «Вставить», вы получите предварительный просмотр, который вы можете протестировать в своем браузере, изменив размер, чтобы увидеть, как видео адаптируется. Под областью предварительного просмотра вы найдете блок кода, который вы можете скопировать / вставить и использовать для встраивания на свой сайт.
Это одно из простейших решений проблемы адаптивного встраивания. Цель — сохранить гибкость видео при сохранении соотношения сторон — задача не из легких.
Это отличная статья о CSS-хитрости с другим решением, которое больше полагается на классы и элемент контейнера. Но если вы не хотите всегда помнить о добавлении этого контейнера, вы можете предпочесть Embedresponsively.com.
Взгляните на сайт и попробуйте. Если вы не против работать с более длинными фрагментами кода, это, безусловно, отличное решение для любого адаптивного макета.
И вы можете найти полный исходный код бесплатно на GitHub если вы хотите добавить поддержку более встраиваемых носителей.
Читайте также: Легко вставляйте отзывчивые видео с SuperEmbed.js
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)