Jak dodać ramkę iframe wokół osadzanego filmu?

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.