Cum să adăugați o bordură iframe în jurul unui videoclip încorporat

Doriți să adăugați o bordură iframe în jurul videoclipului dvs. încorporat? Recent, un utilizator ne-a cerut o modalitate de a adăuga o bordură în jurul videoclipurilor sale în WordPress. Deoarece puteți utiliza atât iframe, cât și oEmbed pentru a adăuga videoclipuri în WordPress, vă vom arăta cum să adăugați o bordură iframe în jurul unui videoclip încorporat, precum și cum să adăugați o bordură în jurul videoclipurilor oEmbed în WordPress.

Tutorial video

Dacă nu îți place videoclipul sau ai nevoie de mai multe instrucțiuni, continuă să citești.

Adăugarea unei margini în jurul videoclipurilor iframe în WordPress

Primul lucru pe care trebuie să-l faceți este să deschideți o postare sau o pagină care conține codul de încorporare a videoclipului iframe. Un cod tipic de încorporare iframe ar trebui să arate cam așa:

<iframe width="560" height="315" src="https://www.youtube.com/embed/qzOOy1tWBCg" frameborder="0" allowfullscreen></iframe>

Puteți adăuga o bordură în jurul acestuia adăugând stil inline la cod, astfel:

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

Pur și simplu schimbați lățimea bordurii, precum și culoarea, și ați terminat.

Deși adăugarea unei borduri pentru iframe funcționează, există de fapt o metodă mai bună de a adăuga o bordură în jurul videoclipurilor în WordPress. Aceasta este prin utilizarea oEmbed.

Adăugarea unei margini în jurul videoclipurilor oEmbed în WordPress

WordPress vine cu suport oEmbed încorporat. Practic, WordPress vă permite să lipiți linkul videoclipului și acesta va obține automat codul de încorporare pentru ele. Acum, acest lucru funcționează doar pentru site-urile cu suport oEmbed, cum ar fi YouTube, Vimeo, DailyMotion, Hulu etc. (Vezi: cum să adăugați cu ușurință videoclipuri în WordPress folosind oEmbed)

Acum că știți cum să adăugați un video cu oEmbed, iată cum puteți adăuga o bordură în jurul videoclipurilor oEmbed în WordPress.

Când adăugați un videoclip folosind oEmbed, pur și simplu încadrați URL-ul într-o etichetă span cu parametri de stil inline, astfel:

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

Dacă doriți să adăugați o bordură similară în jurul tuturor iframe-urilor video, atunci ar fi cel mai bine să adăugați o clasă CSS la foaia de stil a temei dvs.

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

Acum puteți utiliza clasa CSS în codul dvs. de încorporare iframe, astfel:

<iframe class="frame-border" width="560" height="315" src="https://www.youtube.com/embed/qzOOy1tWBCg" frameborder="0" allowfullscreen></iframe>

Puteți folosi, de asemenea, aceeași clasă CSS în eticheta span din jurul URL-urilor video oEmbed, astfel:

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

Beneficiul utilizării unei singure clase CSS este că, dacă schimbați temele mai târziu, puteți schimba cu ușurință culorile cu un singur clic, în loc să reveniți și să editați fiecare videoclip individual.

Sperăm că acest articol v-a ajutat să adăugați o bordură pentru iframe în jurul unui video încorporat în WordPress. De asemenea, ați putea dori să vedeți aceste 9 sfaturi utile YouTube pentru a anima site-ul dvs. WordPress cu videoclipuri.

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.