Een iframe-rand rond een video insluiten

Wil je een iframe-rand rond je video-insluiting toevoegen? Onlangs vroeg een gebruiker ons om een ​​manier om een ​​rand rond hun video's toe te voegen in WordPress. Omdat u zowel iframe als oEmbed kunt gebruiken om video's in WordPress toe te voegen, laten we u zien hoe u een iframe-rand rond een video-insluiting kunt toevoegen en hoe u een rand rond oeming-video's in WordPress kunt toevoegen.

Video-instructies

Als je de video niet leuk vindt of meer instructies nodig hebt, ga dan door met lezen.

Rand toevoegen rond iframe Video's in WordPress

Het eerste wat u hoeft te doen is om een ​​post of pagina te openen met uw iframe video embed code. Een standaard insluitcode voor iframe zou er ongeveer zo uit moeten zien:

Je kunt er een rand omheen toevoegen door inline stijl aan de code toe te voegen:

Verander eenvoudig de breedte van de rand en de kleur en u bent klaar.

Terwijl het toevoegen van een iframe-rand werkt, is er eigenlijk een betere manier om een ​​rand rond video's toe te voegen in WordPress. Dat is door oEmbed te gebruiken.

Rand toevoegen aan oem afbeeldingen in WordPress

WordPress wordt geleverd met ingebouwde oEmbed-ondersteuning. In principe kunt u met WordPress de link van de video plakken en krijgt deze automatisch de insluitcode voor hen. Nu werkt dit alleen voor oEmbed-enabled sites zoals YouTube, Vimeo, DailyMotion, Hulu, etc. (Zie: hoe eenvoudig video's toevoegen in WordPress met oEmbed)

Nu je weet hoe je een video kunt toevoegen met oEmbed, kun je hier een rand toevoegen rond oEmbed-video's in WordPress.

Wanneer u een video toevoegt met oEmbed, wikkelt u de URL in de span-tag in met inline style-parameters, zoals deze:

http://www.youtube.com/watch?v=qzOOy1tWBCg

Als u dezelfde rand rondom alle video-iframes wilt toevoegen, is het het beste om een ​​CSS-klasse aan de stylesheet van uw thema toe te voegen.

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

Nu kunt u de CSS-klasse in uw iframe embed-code als volgt gebruiken:

U kunt dezelfde CSS-klasse ook gebruiken in de span-tag rond uw oEmbed-video-URL's, zoals deze:

http://www.youtube.com/watch?v=qzOOy1tWBCg

Het voordeel van het gebruik van een enkele CSS-klasse is dat als u later van thema verandert, u de kleuren gemakkelijk kunt wijzigen met één klik versus teruggaan en elke video afzonderlijk bewerken.

We hopen dat dit artikel je heeft geholpen om een ​​iframe-rand rond een video-insluiting in WordPress toe te voegen. Misschien wil je deze 9 handige YouTube-tips ook zien om je WordPress-site leuker te maken met video's.

Als je dit artikel leuk vond, meld je dan aan voor onze YouTube-video-tutorials over WordPress. U kunt ons ook vinden op Twitter en Facebook.