Легко создавайте адаптивные коды для встраивания

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

Однако есть проблема с iframes и другими подобными встраиваемыми видео: отсутствие адаптивных решений. Каждый современный сайт полностью адаптивен, и фиксированное видео действительно может нарушить этот поток на мобильных устройствах.

Чтобы противостоять этой проблеме, попробуйте Embedresponsively.com, Это бесплатное веб-приложение автоматически генерирует встраиваемые коды для широкого спектра медиа-сайтов и даже поддерживает стандартные элементы iframe.

Читайте также: HTML5 видео: 10 вещей, которые нужно знать дизайнерам

По умолчанию вы можете выбрать из нескольких мультимедийных сайтов, которые поддерживают встроенные встраивания:

• YouTube
• Vimeo
• DailyMotion
• Instagram
• щебет
• Карты Гугл
• Soundcloud
• Скрибд

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

После того, как вы нажмете кнопку «Вставить», вы получите предварительный просмотр, который вы можете протестировать в своем браузере, изменив размер, чтобы увидеть, как видео адаптируется. Под областью предварительного просмотра вы найдете блок кода, который вы можете скопировать / вставить и использовать для встраивания на свой сайт.

Это одно из простейших решений проблемы адаптивного встраивания. Цель — сохранить гибкость видео при сохранении соотношения сторон — задача не из легких.

Это отличная статья о CSS-хитрости с другим решением, которое больше полагается на классы и элемент контейнера. Но если вы не хотите всегда помнить о добавлении этого контейнера, вы можете предпочесть Embedresponsively.com.

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

И вы можете найти полный исходный код бесплатно на GitHub если вы хотите добавить поддержку более встраиваемых носителей.

Читайте также: Легко вставляйте отзывчивые видео с SuperEmbed.js