Como Adicionar uma Borda de Iframe ao Redor de um Vídeo Incorporado

Você quer adicionar uma borda de iframe ao seu vídeo incorporado? Recentemente, um usuário nos perguntou como adicionar uma borda aos seus vídeos no WordPress. Como você pode usar tanto iframe quanto oEmbed para adicionar vídeos no WordPress, mostraremos como adicionar uma borda de iframe em torno de um vídeo incorporado, bem como como adicionar uma borda em torno de vídeos oEmbed no WordPress.

Tutorial em Vídeo

Se você não gostar do vídeo ou precisar de mais instruções, continue lendo.

Adicionando Borda em Vídeos iframe no WordPress

A primeira coisa que você precisa fazer é abrir uma postagem ou página que contenha o código de incorporação do seu vídeo iframe. Um código de incorporação iframe típico deve parecer algo assim:

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

Você pode adicionar uma borda a ele adicionando um estilo inline ao código como este:

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

Simplesmente mude a largura da borda, bem como a cor, e pronto.

Embora adicionar uma borda de iframe funcione, na verdade existe uma maneira melhor de adicionar uma borda em torno de vídeos no WordPress. Isso é usando oEmbed.

Adicionando Borda em Vídeos oEmbed no WordPress

O WordPress vem com suporte a oEmbed integrado. Basicamente, o WordPress permite que você cole o link do vídeo e ele obterá automaticamente o código de incorporação para eles. Agora, isso só funciona para sites habilitados para oEmbed, como YouTube, Vimeo, DailyMotion, Hulu, etc. (Veja: como adicionar facilmente vídeos no WordPress usando oEmbed)

Agora que você sabe como adicionar um vídeo com oEmbed, veja como adicionar uma borda em torno de vídeos oEmbed no WordPress.

Ao adicionar um vídeo usando oEmbed, simplesmente envolva o URL em uma tag span com parâmetros de estilo inline, assim:

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

Se você quiser adicionar uma borda igual em todos os iframes de vídeo, seria melhor adicionar uma classe CSS à folha de estilo do seu tema.

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

Agora você pode usar a classe CSS em seu código de incorporação iframe assim:

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

Você também pode usar a mesma classe CSS na tag span em torno de seus URLs de vídeo oEmbed, assim:

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

O benefício de usar uma única classe CSS é que, se você mudar de tema mais tarde, poderá alterar facilmente as cores com um clique em vez de voltar e editar cada vídeo individualmente.

Esperamos que este artigo tenha ajudado você a adicionar uma borda iframe em torno de um vídeo incorporado no WordPress. Você também pode querer ver estas 9 dicas úteis do YouTube para dar vida ao seu site WordPress com vídeos.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e Facebook.