Como adicionar uma borda de iframe ao redor de uma incorporação de vídeo

Deseja adicionar uma borda iframe ao redor da incorporação do seu vídeo? Recentemente, um usuário nos pediu uma maneira de adicionar uma borda em torno de seus vídeos no WordPress. Como você pode usar o iframe e o oEmbed para adicionar vídeos no WordPress, mostraremos como adicionar uma borda de iframe ao redor de uma incorporação de vídeo e como adicionar uma borda ao redor dos vídeos do oEmbed no WordPress.

Tutorial em vídeo

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

Adição de borda em torno de vídeos iframe no WordPress

A primeira coisa que você precisa fazer é abrir um post ou uma página que contenha o código de incorporação do vídeo iframe. Um código de incorporação de iframe típico deve ser parecido com este:

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

Você pode adicionar uma borda ao redor dele adicionando um estilo em linha 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>

Basta alterar a largura da borda e a cor, e pronto.

Embora a adição de uma borda de iframe funcione, há uma maneira melhor de adicionar uma borda em torno dos vídeos no WordPress. Isso é feito com o oEmbed.

Adição de borda em torno de vídeos oEmbed no WordPress

O WordPress vem com suporte incorporado ao oEmbed. Basicamente, o WordPress permite que você cole o link do vídeo e ele obterá automaticamente o código de incorporação para ele. 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 o oEmbed, veja como adicionar uma borda em torno dos vídeos do oEmbed no WordPress.

Ao adicionar um vídeo usando o oEmbed, basta envolver o URL na tag span com parâmetros de estilo inline, como este:

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

Se quiser adicionar a mesma borda em todos os iframes de vídeo, é 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 de iframe da seguinte forma:

<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 dos URLs de vídeo do oEmbed, assim:

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

A vantagem de usar uma única classe CSS é que, se você mudar de tema posteriormente, 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 ao redor de uma incorporação de vídeo no WordPress. Talvez você também queira ver estas 9 dicas úteis do YouTube para incrementar seu site WordPress com vídeos.

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