Vídeos embed, com iframe fluída

Quando queremos incluir conteúdo embed no nosso site temos de arranjar técnicas de layout CSS para conseguir integrar as iframes onde é carregado esse conteúdo externo.

No nosso site com design responsivo, um dos desafios é como tornar as iframes fluídas, ou seja, com uma largura flexível, sem perder a proporção do conteúdo que lá é carregado.

Este exemplo tem como referência dois artigos:

frameborder="0" é um atributo obsoleto em HTML5, podemos com segurança apagá-lo do código embed que nos é apresentado. Basta colocar um exemplo no validador para ver que indica esse erro ou consultar a referência do elemento iframe, no site do MDN

Atenção, devemos usar iframes com contenção porque elas tornam a nossa página mais lenta de carregar.