Este año será el de la creación de sitios web con Responsive Web Design, una técnica que adapta el diseño web a cualquier dispositivo y/o resolución. Es por tanto indispensable que todo el contenido del sitio web sea Responsive para que no rompa el diseño, esto lo controlamos con el css y mediaquerys de nuestro servidor

¿Pero que pasa con el contenido externo? Pongamos por ejemplo que queremos embeber un vídeo de Youtube, para esta tarea nos ofrecen un iframe.

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

Para que el iframe se adapte vamos crear algunos divs y css

Divs

 <div class="cajadevideo">

        <div class="video">

            <iframe src="http://www.youtube.com/embed/5dRoiO9LNBM"></iframe>

        </div>
        <div class="video">

            <iframe src="http://player.vimeo.com/video/18977059"></iframe>

        </div>

    </div>

CSS

.cajadevideo{

    width:560px;
    margin:auto;

}

.video{

    height:0px;
    width:100%;
    max-width:560px;
    padding-top:56.25%;
    position:relative;

}

iframe{

    position:absolute;
    height:100%;
    width:100%;
    top:0px;
    left:0px;

}

Aquí puedes ver el ejemplo de como el vídeo se estira o encoge según resolución de pantalla, en el ejemplo he puesto un ancho maximo de 560px.