Просмотров: 7 059

Как сделать мобильно оптимизированными видео Youtube и Vimeo на вашем сайте?

Когда вы размещаете видео от Youtube и Vimeo на вашем сайте, можно столкнутся с проблемой, что такие видео на мобильных устройствах (телефонах и планшетах) могут выглядеть вот так:

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

Каким образом можно сделать подобные видео мобильно оптимизированными и чтобы они хорошо отображались на мобильных устройствах?

Сделать это можно с помощью jQuery и CSS. Как ни крути, но нужно будет добавлять дополнительный код в структуру вашего сайта. Радует только одно, что этого кода нужно будет добавить не слишком много.

Итак, код jQuery:

<script type="text/javascript">
 
$(document).ready(function () { 
 $('iframe[src*="youtube.com"]').wrap('<div class="youtubeWrapper" />'); 
 $('iframe[src*="vimeo.com"]').wrap('<div class="vimeoWrapper" />');
});
</script>

По сути, этот код выбирает все видео на сайте и оборачивает их в блок div с соответствующим классом.

Переходим к коду CSS:

<style>
 
.youtubeWrapper, .vimeoWrapper, .instagramWrapper {
 position: relative;
 padding-top: 30px; height: 0; overflow: hidden;
}
 
.youtubeWrapper, .vimeoWrapper {
 padding-bottom: 56.25%; 
}
 
.instagramWrapper {
 padding-bottom: 120%;
}
 
.youtubeWrapper iframe,
.youtubeWrapper object,
.youtubeWrapper embed,
.vimeoWrapper iframe,
.vimeoWrapper object,
.vimeoWrapper embed,
.instagramWrapper iframe,
.instagramWrapper object,
.instagramWrapper embed {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}
</style>

Этот код заставит ваши видео на сайте отображаться правильно.

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

  • http://seo-today.ru/archives/800 SEO-Дайджест № 97

    […] Как сделать мобильно оптимизированными видео Youtube и Vime…webgyry.info Хомак опубликовал самоочевидную инструкцию: «как вынести сайт-конкурент из Рунета руками РКН?» Roem.ruroem.ru Через полгода Google Chrome начнет автоматически блокировать рекламуpr-cy.ru Мой первый финстрип. За май.ip-host.biz 4 системы выдачи займов в WebMoney, на которых я зарабатывал30mln.ru Стрип за Май 17linklinklink.ru […]