Wstawiamy filmik z YouTube na stronę

Dziś tak na szybkiego będę pisać, bo jest późno i zrobiłam się zmęczona i śpiąca. Dlatego tutorial nie będzie zbytnio wyszukany, ale może okazać się przydatny.
Chcąc umieścić filmik z YouTube na naszą stronę, należy pod filmem na YT kliknąć przycisk „udostępnij”, następnie „umieść na stronie” i skopiować kod z okienka.

yt2

Ten powyższy kod umieszczamy w kodzie html na stronie.

<iframe width="560" height="315" src="https://www.youtube.com/embed/qP4Y9rp4IOs?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

Pokażę trick, dzięki któremu filmik będzie responsywny. Usuwamy z kodu width i height i na koniec kodu dodajemy class=”video”.

<iframe src="https://www.youtube.com/embed/qP4Y9rp4IOs?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen class="video"></iframe>

Jest to klasa którą zdefiniujemy w stylach css:

.video{
	width: 47%;
	height: 290px;
	margin-left: 0.3%;
	margin-right: 0.3%;
}

W width wpisujemy szerokość okienka w %, może to być 100% i filmik na całą szerokość strony, należy wpisać też wysokość. Musimy sami ustawić próbami jaka wysokość najlepiej będzie pasować.

Aby w innych rozdzielczościach też dobrze wyglądało okienko z filmikiem, należy dopisać style do @media, np. styl dla smartfonów:

@media (max-width: 550px) {
.video{
	width: 100%;
	height: 220px;
	margin-left: 0.3%;
	margin-right: 0.3%;
}
}

Powyżej zastosowałam szerokość 100%, by video było lepiej widoczne na całą szerokość ekranu. Wysokość też dostosowałam.

Gotowe, mamy filmik który dostosowuje się do okna przeglądarki i nie musimy się martwić czy i jak bardzo wyjdzie on poza stronę 🙂

Podobne wpisy

Subscribe
Powiadom o
guest

8 komentarzy
najstarszy
najnowszy oceniany
Inline Feedbacks
View all comments
Artur
7 lat temu

Budując swoją stronę np. na systemie WordPress możemy umieścić filmik dużo łatwiej. Wystarczy że wkleimy link do filmu na stronie (we wpisie) a system sam przekonwertuje link na odpowiedni kod bez naszej ingerencji.
Nie potrzeba do tego żadnych wtyczek przez co strona internetowa działa szybko i stabilnie.

Artur
7 lat temu

albo ustawić width=”99%”

WytwórniaFilmów360

No rzeczywiście zależy kto na czym pracuje. Bo na WordPressie wszystko jest łatwiejsze. Ale ogólnie dzięki za kod. 😉

Przemek
Przemek
10 miesięcy temu

Cześć, mam pytanie – czy da się wstawić na stronę filmik z YT, ale w taki sposób, żeby nie było możliwości skopiowania do niego bezpośredniego linka do YT? Zazwyczaj na ekranie filmu jest przycisk udostępnij, chciałbym żeby go nie było oraz żeby nie było przycisku YouTube, który otwiera dany filmik bezpośrednio na YT.