Jak dodać ramkę iframe wokół osadzonego wideo

Czy chcesz dodać ramkę iframe wokół osadzonego filmu? Ostatnio jeden z użytkowników poprosił nas o sposób na dodanie ramki wokół swoich filmów w WordPress. Ponieważ możesz używać zarówno iframe, jak i oEmbed do dodawania filmów w WordPress, pokażemy Ci, jak dodać ramkę iframe wokół osadzonego filmu, a także jak dodać ramkę wokół filmów oEmbed w WordPress.

Samouczek wideo

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ć post lub stronę zawierającą 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ć wokół niego ramkę, dodając styl w linii do kodu w ten sposób:

<iframe style="border: 3px solid #EEE;" width="560" height="315" src="https://www.youtube.com/embed/qzOOy1tWBCg" frameborder="0" allowfullscreen></iframe>

Po prostu zmień szerokość ramki, a także kolor, i gotowe.

Chociaż dodanie ramki iframe działa, istnieje lepszy sposób na dodanie ramki wokół filmów w WordPressie. Polega to na użyciu oEmbed.

Dodawanie obramowania wokół filmów oEmbed w WordPress

WordPress posiada wbudowane wsparcie dla oEmbed. W zasadzie WordPress pozwala na wklejenie linku do filmu, a on automatycznie pobierze dla niego kod osadzania. Teraz działa to tylko dla stron obsługujących oEmbed, takich jak YouTube, Vimeo, DailyMotion, Hulu itp. (Zobacz: jak łatwo dodawać filmy w WordPressie za pomocą oEmbed)

Teraz, gdy wiesz, jak dodać film za pomocą oEmbed, oto jak możesz dodać ramkę wokół filmów oEmbed w WordPress.

Podczas dodawania filmu za pomocą oEmbed, po prostu umieść adres URL w tagu span z parametrami stylu inline, w ten sposób:

<span style="border:3px solid #EEE;">http://www.youtube.com/watch?v=qzOOy1tWBCg</span>

Jeśli chcesz dodać taką samą ramkę wokół wszystkich osadzonych filmów iframe, najlepiej dodać klasę CSS do arkusza stylów swojego motywu.

.frame-border { 
border:3px solid #EEE; 
}

Teraz możesz użyć klasy CSS w swoim kodzie osadzania iframe w ten 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 osadzonych filmów, w ten sposób:

<span class="frame-border">http://www.youtube.com/watch?v=qzOOy1tWBCg</span>

Korzyścią z używania pojedynczej 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 indywidualnie.

Mamy nadzieję, że ten artykuł pomógł Ci dodać ramkę iframe wokół osadzonego wideo w WordPressie. Możesz również zapoznać się z tymi 9 przydatnymi wskazówkami dotyczącymi YouTube, aby urozmaicić Twoją witrynę WordPress filmami.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz Kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.