Предоставено от Blogger.

Как да направим 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>

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

Категория:

0 коментара:

Публикуване на коментар

Ако статията Ви е харесала споделете я от бутона в ляво или напишете коментар, ние ще ви отговорим.