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.

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ę 🙂