W artykule:
Czy chcesz dodać ramkę iframe wokół osadzania wideo? Ostatnio użytkownik poprosił nas o sposób na dodanie obramowania 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, jak dodać ramkę iframe wokół osadzenia wideo, a także Jak dodać ramkę wokół filmów oEmbed w WordPress.
Video Tutorial
Jeśli nie podoba Ci się film lub potrzebujesz więcej instrukcji, Kontynuuj czytanie.
Dodawanie obramowania wokół filmów iframe w WordPress
Pierwszą rzeczą, którą musisz zrobić, to otworzyć post lub stronę zawierającą kod osadzania wideo iframe. Typowy kod osadzania ramek 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 do kodu styl wbudowany 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>
Wystarczy zmienić szerokość obramowania, a także kolor i gotowe.
Podczas dodawania ramki iframe działa, w rzeczywistości istnieje lepszy sposób na dodanie ramki wokół filmów w WordPress. To przez użycie oembeda.
Dodawanie obramowania wokół filmów oEmbed w WordPress
WordPress jest wyposażony we wbudowaną obsługę oEmbed. Zasadniczo WordPress pozwala wkleić link do filmu, a automatycznie otrzyma kod do osadzenia dla nich. Teraz działa to tylko na stronach z obsługą oEmbed, takich jak YouTube, Vimeo, DailyMotion, Hulu itp. (Zobacz: jak łatwo dodawać filmy w WordPress za pomocą oEmbed)
Teraz, gdy wiesz, jak dodać film z oEmbed, oto jak możesz dodać ramkę wokół filmów oEmbed w WordPress.
Podczas dodawania wideo za pomocą oEmbed, po prostu zawiń adres URL w znacznik span z parametrami stylu wbudowanego, takimi jak ten:
<span style = "border: 3px solid #EEE;" >http://www.youtube.com/watch?v=qzOOy1tWBCg< / span>
Jeśli chcesz dodać tę samą ramkę wokół wszystkich ramek iFrame wideo, najlepiej byłoby dodać klasę CSS do arkusza stylów szablonu.
.frame-border {
border: 3px solid #EEE;
}
Teraz możesz użyć klasy CSS w 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 znaczniku span wokół adresów URL wideo oEmbed, jak to:
<span class = "frame-border" >http://www.youtube.com/watch?v=qzOOy1tWBCg< / span>
Zaletą korzystania z jednej klasy CSS jest to, że jeśli zmienisz motywy później, możesz łatwo zmienić kolory za pomocą jednego kliknięcia, a następnie wrócić i edytować każdy film indywidualnie.
Mamy nadzieję, że ten artykuł pomógł Ci dodać ramkę iframe wokół osadzenia wideo w WordPress. Możesz również zobaczyć te przydatne wskazówki YouTube 9, aby urozmaicić swoją witrynę WordPress filmami.
Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.
