TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

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

1 051

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

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

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

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

Теперь рассмотрим код который нам генерирует 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

Leave A Reply

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее