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. 😉
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.
Za pomocą WordPress bardzo łatwo, np. dodajesz wideo w tle. A już ciężej jest ze zwykłą stroną html, bo np. bawiąc się generatorami jak https://www.socialvideoplaza.com/en/tools/embed-code-link-generator to nawet jak zaznaczy się opcje, by tego nie pokazywał, to i tak pokazuje.