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&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&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ę 🙂
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.
Dzięki, spróbuję tak zrobić 🙂
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.
albo ustawić width=”99%”
wstawiałam width, ale to nie działało w %. Do tego potrzebny oddzielny styl.
No rzeczywiście zależy kto na czym pracuje. Bo na WordPressie wszystko jest łatwiejsze. Ale ogólnie dzięki za kod. 😉