Czy chcesz dodać obramowanie iframe wokół twojego osadzanego filmu? Niedawno jeden z użytkowników zapytał nas o sposób na dodanie obramowania wokół swoich filmów w WordPress. Ponieważ do dodawania filmów w WordPress można używać zarówno iframe, jak i oEmbed, pokażemy, jak dodać obramowanie iframe wokół osadzanego filmu, a także jak dodać obramowanie wokół filmów oEmbed w WordPress.
Film poradnik
Jeśli nie podoba Ci się film lub potrzebujesz więcej instrukcji, czytaj dalej.
Dodawanie obramowania wokół filmów iframe w WordPress
Pierwszą rzeczą, którą musisz zrobić, to otworzyć wpis lub stronę zawierającą twój kod osadzania filmu iframe. Typowy kod osadzania iframe powinien wyglądać mniej więcej tak:
<iframe width="560" height="315" src="https://www.youtube.com/embed/qzOOy1tWBCg" frameborder="0" allowfullscreen></iframe>.
Możesz dodać obramowanie wokół niego, dodając styl inline do kodu w następujący sposób:
<iframe style="border: 3px solid #EEE;" width="560" height="315" src="https://www.youtube.com/embed/qzOOy1tWBCg" frameborder="0" allowfullscreen></iframe>
Wystarczy zmienić szerokość obramowania oraz kolor i gotowe.
Chociaż dodanie obramowania iframe działa, w rzeczywistości istnieje lepszy sposób na dodanie obramowania wokół filmów w WordPress. Jest to użycie oEmbed.
Dodawanie obramowania wokół filmów oEmbed w WordPress
WordPress posiada wbudowaną pomoc techniczną oEmbed. Zasadniczo WordPress pozwala wkleić odnośnik do filmu, a automatycznie pobierze dla niego kod osadzania. Teraz działa to tylko w przypadku witryn włączających oEmbed, takich jak YouTube, Vimeo, DailyMotion, Hulu itp. (Zobacz: jak łatwo dodawać filmy w WordPressie za pomocą oEmbed).
Teraz, gdy już wiesz, jak dodać film za pomocą oEmbed, oto jak możesz dodać obramowanie wokół filmów oEmbed w WordPress.
Dodając film za pomocą oEmbed, wystarczy zawinąć adres URL w tag span z parametrami stylu inline, tak jak poniżej:
<span style="border:3px solid #EEE;">http://www.youtube.com/watch?v=qzOOy1tWBCg</span>
Jeśli chcesz dodać takie samo obramowanie wokół wszystkich ramek iframe z filmami, najlepiej będzie dodać klasę CSS do arkusza stylów twojego motywu.
.frame-border {
border:3px solid #EEE;
}
.
Teraz możesz użyć klasy CSS w twoim kodzie osadzania iframe w następujący sposób:
<iframe class="frame-border" width="560" height="315" src="https://www.youtube.com/embed/qzOOy1tWBCg" frameborder="0" allowfullscreen></iframe>.
Możesz również użyć tej samej klasy CSS w tagu span wokół adresów URL twojego filmu oEmbed, w następujący sposób:
<span class="frame-border">http://www.youtube.com/watch?v=qzOOy1tWBCg</span>
Zaletą korzystania z jednej klasy CSS jest to, że jeśli później zmienisz motyw, możesz łatwo zmienić kolory jednym kliknięciem, zamiast wracać i edytować każdy film osobno.
Mamy nadzieję, że ten artykuł pomógł ci dodać obramowanie iframe wokół filmu osadzanego w WordPress. Warto również zapoznać się z tymi 9 przydatnymi wskazówkami YouTube, aby urozmaicić twoją witrynę WordPress filmami.
Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube, aby zobaczyć poradniki dotyczące filmów WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Nicola says
There seems to be extra space at the bottom so it doesn’t fit exactly, how can I fix this please.
thanks
WPBeginner Support says
If you’ve set the width and height you would likely need to change the height based on the dimensions of your video.
Administrator
Thomas says
The frame covers the video controls, how do i stop this happening? Cheers.
tom says
I have got the border but can’t change the colour? How do I do this?
eric greenspan says
Change the hex number Tom. For Dodger blue use: #1E90FF in place of #EEE. You can find hex colors here.