Как сделать резиновый iframe youtube

Обновлено: 07.07.2024

Бывают случаи, когда вставляемое видео с Youtube на сайте не адаптируется к мобильным устройствам и при его просмотре на таковых просто напросто обрезается, что не есть хорошо для вашего ресурса. Ведь как Вы знаете сейчас мобильные устройства довольно широко распространены и ими пользуется подавляющее большинство пользователей интернета. И само собой, если ваше видео не будет отображаться на сайте должным образом, то посетитель обязательно уйдет от Вас. Этого нельзя допустить!

И если Вы столкнулись с такой проблемой, и ваш сайт, например лендинг, не адаптирует вставленное видео с Ютуба как это положено, то этот материал именно для Вас!

Так давайте же быстренько разберемся с проблемой, как сделать адаптивное видео с Ютуба на своем сайте. Поехали …

Адаптивная верстка видео всталенного с Ютуба на сайт – Как это сделано?

Этот способ исправления адаптивности видео подойдет любому пользователю, так как он прост в использовании и совершенно бесплатен! Данный лайфхак, назовем его так, будет выглядеть вот таким образом …

Вы берете простой код с Youtube для вставки видео на сайт, думаю каждый знает где его можно взять, а если нет, то смотрите вот эту картинку и сразу все поймете:

А в этой статье, Вы сможете прочесть и узнать самый лучший способ продвинуть и раскрутить канал на Ютуб быстро и дешево!

Теперь дальше по теме, а то что-то я отклонился от нее …

Скопированный код видео с Ютуба Вам нужно обернуть в div с классом videoWrapper и это будет выглядеть примерно вот так:

Далее необходимо добавить стили CSS в свой файл стилей style.css , ищите его в вашей активной теме оформления сайта. Вот эти стили:

.videoWrapper position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
>

.videoWrapper iframe,.videoWrapper object, .videoWrapper embed position:absolute;
top:0;
left:0;
width:100%;
height:100%;
>

Вот и все, что требовалось сделать, чтобы видео с ютуба стало адаптивным!

Да, вот посмотрите классное адаптивное видео с Ютуба, которое Вас не оставит равнодушным, так как эта музыка просто завораживает:

Думаю, что оно Вам должно понравиться? Не так ли?!

Здравствуйте, друзья! Все мы знаем, что поисковые системы оценивают мобильность темы сайта. В Сети уже валом адаптивных тем для всех типов CMS. Но оказывается сама по себе адаптивность темы не решает всех проблем. Она конечно адаптирует контент, но к сожалению иногда под исключение попадает видео, вставляемое с Youtube. Однако буквально несколько строк кода помогут выйти победителем из данной ситуации.

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

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

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

Обычно вставляют видео через шорткоды самого WordPress (добавить медиафайлы со стороннего сайта)

или путем копирования и вставки записи фрейма, которую формирует Ютуб через поделиться и выбор режима HTML-код.

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

И вот в этом случае получается, что при всей адаптивности темы при разрешениях экрана гаджета пользователя меньших, чем заявленная в параметрах видеофрейма ширина, этот самый фрейм уже начинает вылазить за границу страницы. Выглядит это вот так:

Вы сами прекрасно видите суть проблемы невооруженным взглядом. Как говорят в таких случаях: без комментариев! При этом стоит отметить, что горизонтальный скрол на экране не появляется. Именно по этой причине Яндекс и прислал свое уведомление.

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

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

Но конечно само по себе помещение в контейнер не даст ничего, если не прописать стили в файле CSS темы:

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

Другими словами нужно прописать свойства самого блока div, а он уже все сделает сам. Причем такое решение много полезнее применения специальных плагинов с точки зрения скорости Вашего сайта.

За счет добавления такой записи уже будет без разницы, как Вы вставляете свое видео — оно прекрасно будет адаптироваться.

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

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

Первое, что вам нужно, это встроенный код YouTube iframe, воспользуйтесь им в настройках общего доступа к видео с сайта YouTube. Что можно наблюдать, как в отдельном блоке или в модальном окне. Где при сжатии, плеер будет своей основой вылазить. Но только мы под него пропишем стили, так все изначально корректно будет смотреться, это даже на самом небольшом экране телефона.

Установка проста, задаем класс и выставляем стили:

.adaptivnoye-video <
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
>

.adaptivnoye-video iframe <
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
>

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

Подробнее описано и представлено несколько вариантов под разные плееру в теме как сделать адаптивное видео, где показан тэг iframe, а также есть другие, что выводит видео.

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

Именно поэтому сегодня я хочу рассмотреть несколько нюансов по вставке видео на сайт с Youtube и похожих сервисов. Часть инфы в начале пригодится новичкам, а в конце текста найдете один прием для верстки. Разделы статьи:

. . (+ сниппет для автоматизации процесса). (линк на другую статью блога).

Вставка видео с Youtube

Начнем с самого глобального и универсального метода. Практически в каждом видеохостинге рядом с роликом должна быть форма, позволяющая поделиться им с другими пользователями. В ютубе она выглядит следующим образом:

На этой странице вы можете:

То есть все, что вам нужно сделать, это скопировать код соответствующего ролика и добавить его в требуемое место.

Если у вас в проекте имеется определенная админка, то используйте ее встроенный текстовый редактор. В противном случае придется редактировать непосредственно HTML страницу (через Notepad++ или Sublime Text и т.п). Реализацию первого варианта можете посмотреть ниже на примере с Вордпресс.

Пару слов о теге Iframe, который применяется чтобы вставить видео на сайт в HTML с Ютуба. Здесь есть следующие параметры:

width — ширина блока;
height — высота;
src — ссылка на Youtube видео;
frameborder — отображение рамки/границы у фрейма;
allowfullscreen — поддержка полноэкранного режима.

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

Вставка видео в WordPress и не только

Теперь рассмотрим самый простой способ как вставить видео с Youtube на сайт WordPress. Данную систему использует большинство блогов и не только. Сначала пару слов о реализации через текстовый редактор, о чем я говорил выше, а потом покажу вариант с HTML.

Помнится, раньше для решения задачи даже были какие-то специальные wp плагины, но сейчас все гораздо проще, я бы сказал элементарно.

Чтобы вставить видео на сайт WordPress:

Заходите в админку своего веб-проекта и выбирайте добавление/редактирование записи.
Затем в текстовом редакторе просто размещаете ссылку на Youtube видео.
В 99% случаев система автоматически преобразует линк (как показано на гифке ниже).

Возможно, в других системах такой функции нет, и придется использовать вариант с HTML. В таком случае для вставки видео с Youtube на сайт Joomla будь то или Вордпресс, или любая другая CMS вам нужно:

Адаптивное видео c Youtube

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

Чтобы реализовать адаптивное видео на сайте вставляете HTML код с Ютуба, Vimeo и любого другого сервиса внутрь нового DIV:

Затем в стилях прописываете:

Тут есть 2 нюанса:

Если плеер добавляется через object и embed, то для них также задаете аналогичные стили как с iframe.
В первом селекторе стилей параметр padding-bottom: 56.25%; соответствует пропорциям ролика 16:9, если нужен формат 4:3 — используйте значение 75%.

Сниппет для автоматизации процесса (оборачивает iframe в DIV с нужным стилем, но CSS все равно нужно добавить):

add_filter('the_content', 'filter_iframe'); function filter_iframe($html)< $html = preg_replace('/ (.*?) /is', '

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

Читайте также: