«
»
GoogleGoogle YouTubeWordPress

Вставка адаптивного кода YouTube

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

Перейти на сервис

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

Теперь рассмотрим код который нам генерирует t3premium:

<style> .iframe-container { position: relative; margin-bottom: 30px; padding-bottom: 56.25%; padding-top: 25px; height: 0; max-width: 100%; } .iframe-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } </style> <div class="iframe-container"> <iframe src="https://youtube.com/embed/bAiGMjkic4A" allowfullscreen=""></iframe><br /> <span style="font-size: 10px; position:absolute; bottom:-18px; right:0;"> <a href="https://www.t3premium.de/video-generator/" rel="nofollow" style="font-size: 10px;"> Responsive Video Generator </a>von <a href="https://www.t3premium.de/" rel="nofollow" style="font-size: 9px;">T3 Premium</a> </span></div>

Естественно из кода лучше удалить срочку:

<a href="https://www.t3premium.de/video-generator/" rel="nofollow" style="font-size: 10px;"> Responsive Video Generator </a>von <a href="https://www.t3premium.de/" rel="nofollow" style="font-size: 9px;">T3 Premium</a>

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

<style> .iframe-container { position: relative; margin-bottom: 30px; padding-bottom: 56.25%; padding-top: 25px; height: 0; max-width: 100%; } .iframe-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } </style> <div class="iframe-container"> <iframe src="https://youtube.com/embed/bAiGMjkic4A" allowfullscreen=""></iframe><br /> <span style="font-size: 10px; position:absolute; bottom:-18px; right:0;"> </span></div>

Отображение видео кода по умолчанию:

Что бы изменишь ширину и установить по центру наш блок с видео обернем видео код следующим кодом:

<div style=" max-width: 70%; margin-left: auto; margin-right: auto; "> СГЕНЕРИРОВАННЫЙ КОД ИЗ www.t3premium.de </div>

Отображение видео кода с центрированием и отступами:

Источник записи: https://mediadoma.com

Связанные записи
WordPressЮмор

Как сделать так, чтобы загрузка вашего WordPress сайта была действительно медленной (100% серьезный пост) 😂

Windows инструкцииWordPress

Как разделить большие файлы XML в WordPress

PageSpeed InsightsWordPressПлагины

Как отключить плагины WordPress на определенных страницах и постах с плагином и без (через функцию)

WordPressПлагины

Создать сайт членства с WordPress