Как да направим Embed кода на YouTube или Vimeo отзивчив

Вграждането на видео и мултимедийно съдържание от източници, като YouTube, Vimeo, Google Карти, Instagram, Twitter, Facebook и др. може да се окаже предизвикателство, когато става въпрос да се гарантира, че съдържанието трябва да преоразмерява, за да се побере във всички видове устройства.

Най-накрая сте решили да обновите сайта си и да го направите отзивчив за всички устройства от десктоп, до таблет и смартфон. Всичко изглежда идеално на телефона ви с HTML5, CSS3 и responsive оформление, докато не вградите видео клип от YouTube.

Изведнъж забелязвате, че кода който сте вградили не е респонсив. Вариантите са два, ще отделите часове от времето си да хаквате кода за вграждане или ще го оставите да развали оформлението на сайта ви .

Как се взема Embed за вграждане на видео от YouTube

За целта разбира се трябва да посетите YouTube и да намерите видеоклипа, който ви е харесал и искате да го добавите към съдържанието на вашия уеб сайт.

Докато видеоклипът работи щракнете с десен бутон върху прозореца на плейъра. Ще ви се появи допълнително меню с опции, от което трябва да изберете „Copy embed code“, както е показано с червената стрелка на снимката.

Кода за вграждане е копиран, за да го видите трябва да го „Поставите“ с десен бутон в някой текстов редактор, като Notepad или Word.

Официалния код за вграждане предоставен от YouTube трябва да изглежда така:

<iframe width="640" height="360" src="https://www.youtube.com/embed/4Aa9GwWaRv0?list=PLAR_flwfx1QLU0bcWW4m7-dC1Hx8HoxYd" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Как да направим Embed кода на YouTube или Vimeo отзивчив

Embed кода предоставен от YouTube е стандартен и може само ръчно да се променят съотношението на страните на плейъра. Това става като променяте цифровата равностойност на „width” и „height”.

Но ако искате плейърът на YouTube да е „Responsive“ и автоматично да променя размера си според екрана на мобилното устройство трябва да използвате кода по-долу, като само промените URL адреса отбелязан в червено:

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed/4Aa9GwWaRv0?list=PLAR_flwfx1QLU0bcWW4m7-dC1Hx8HoxYd' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>

Това е всичко, което трябва да направите за да бъдат видеоклиповете, които добавяте към сайта си с променящ се размер, според екрана на мобилното устройство.