Wstawiamy filmik z YouTube na stronę

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

5 komentarzy to “Wstawiamy filmik z YouTube na stronę”

You can leave a reply or Trackback this post.
  1. 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.

    • Właśnie testowałam, działa bo wstawił filmik, ale był za duży i wychodził poza stronę i niestety nie jest responsywny, do tego nie było w kodzie parametrów, więc zdecydowanie lepiej generować kod z yt klikając na przycisk udostępnij.

Write a Reply or Comment

Your email address will not be published.