Código responsivo para vídeos e jogos online em Flash

Ao criarmos um blog, temos que estar preparados para enfrentarmos diversos tipos de problemas, alguns são fáceis de resolver e outros nem tanto. Novos modelos de templates começaram a surgir no mercado; os templates responsivos, mas nem todos os templates são perfeitos, alguns não tem capacidade de redimensionar jogos online em flash e, acabam destruindo o visual do seu blog.



Felizmente, isso é fácil de resolver! Tudo que você precisa para resolver este probleminha, é de apenas algumas linhas de CSS. Com este código você pode ajustar automaticamente vídeos e jogos online em flash, num template responsivo ou não. Por exemplo, se o template do seu blog não for responsivo, e a largura da área de postagens tiver "650px" e você quiser diminuir para "600px", vai dar problema caso haja vídeos e/ou jogos com "640px" de largura!! Você teria que redimensionar manualmente todos os vídeos e/ou jogos; o que não acontecerá se você utilizar o código abaixo:

Esta parte do código você adiciona no CSS do seu blog (No Blogger, o código CSS deve ficar acima de "]]></b:skin>")

.video-container {position: relative;padding-bottom: 56.25%;padding-top: 30px;height: 0;overflow: hidden;}
.video-container iframe,
.video-container object,
.video-container embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

Esta outra parte do código você deve utilizar sempre que postar um vídeo ou jogo online em flash nas páginas do seu blog. O código do vídeo ou do jogo deve ficar dentro desta "div", veja os exemplos abaixo:

  Enigmata: Stellar War
<div class="video-container">
CÓDIGO DO VÍDEO OU JOGO AQUI!
</div>

Exemplo com código de vídeo:
<div class="video-container">
<iframe width="650" height="315" src="//www.youtube.com/embed/2zqy21Z29ps" frameborder="0" allowfullscreen></iframe>
</div>

Exemplo com código de jogo:

<div class="video-container">
<embed width="700" height="550" base="http://external.kongregate-games.com/gamez/0014/4037/live/" src="http://external.kongregate-games.com/gamez/0014/4037/live/embeddable_144037.swf" type="application/x-shockwave-flash"></embed>
</div>

Como você pode perceber, o vídeo possui 650px de largura e o jogo online em flash possui 700px de largura, seria impossível encaixá-los de maneira perfeita num template com 600px de largura. Mas, graças a esse código, eu consegui fazer isso; observe as imagens deste artigo (as linhas verticais que acompanham as imagens, são os limites da área de postagem do meu blog de testes)! OBS: O código funciona melhor em vídeos, alguns jogos online em flash não podem ser redimensionados, porque foram feitos com altura e largura fixa; outros aceitam, mas ficam meio deformados (principalmente os menus de textos)!