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

Вграждането на видео и мултимедийно съдържание от източници, като YouTube, Vimeo, Google Карти, Instagram, Twitter, Facebook и др. може да се окаже предизвикателство, когато става въпрос да се гарантира, че съдържанието, което вграждаме трябва да преоразмерява, за да се побере във всички видове устройства.
Най-накрая сте решили да обновите сайта си и да го направите отзивчив за всички устройства от десктоп, до таблет и смартфон. Всичко изглежда идеално на телефона ви с HTML5, CSS3 и отзивчиво оформление, докато не вградите видео клип от 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>

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

Коментари

ПОПУЛЯРНИ

ТОП 5 на най-добрата безплатна програма за записване на дискове CD-DVD 2019

ТОП 5 на най-добрия безплатен онлайн PDF редактор на текст 2019

Как да проверя дали домейна на сайта ми е наказан и е в черния списък на Google