Como adicionar uma margem do iframe em torno de uma incorporação de vídeo

Deseja adicionar uma margem de iframe ao redor do seu embutimento de 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 oEmbed para adicionar vídeos no WordPress, mostraremos como adicionar uma margem de iframe em torno de um embutimento de vídeo, bem como como adicionar uma borda em torno de vídeos em WordPress.

IFRAME Border em torno de vídeos do WordPress

Adicionando Border Around iframe Videos em WordPress

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

Você pode adicionar um limite em torno dele adicionando estilo inline ao código como este:

Um vídeo do iframe incorpora com a borda ao redor

Simplesmente altere a largura da borda, bem como a cor, e você está pronto.

Ao adicionar uma borda do iframe funciona, existe realmente uma maneira melhor de adicionar uma borda em torno de vídeos no WordPress. Isso é usando oEmbed.

Adicionando Border Around oEmbed Videos no WordPress

O WordPress vem com suporte interno embutido. Basicamente, o WordPress permite que você cola o link do vídeo, e ele automaticamente obterá o código embutido para eles. Agora, isso funciona apenas 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, aqui é como você pode adicionar uma borda ao redor de vídeos em WordPress.

Ao adicionar um vídeo usando oEmbed, simplesmente envolva o URL na etiqueta span com parâmetros de estilo inline, como este:

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

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

.moldura {
 borda: 3px sólido #EEE;
 } 

Agora você pode usar a classe CSS no seu código de incorporação iframe como este:

Você também pode usar a mesma classe CSS na tag span em torno de seus URLs de vídeo em questão, como esta:

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

O benefício de usar uma única classe CSS é que se você alterar os temas mais tarde, então você pode facilmente alterar as cores com um clique e voltar e editar cada vídeo individualmente.

Esperamos que este artigo ajude você a adicionar uma margem do iframe em torno de um vídeo embutido no WordPress. Você também pode querer ver essas 9 dicas úteis do YouTube para apimentar o seu site WordPress com vídeos.