Truco para poner, incrustar o embeber un vídeo de RTVE en WordPress (solucionado)

Existe un problema para los usuarios de WordPress y es que cuando se quiere poner, incrustar o embeber un vídeo de la web de RTVE. Pese a que esta web de la televisión pública española ofrece gratis los códigos de sus vídeos, finalmente en nuestras webs el tamaño y el aspecto del vídeo salen mal, pequeños y descuadrados.

Esto se debe a un problema de compatibilidades con los divs y estilos de la web de RTVE y la de WordPress.

Pero tranquilos, tuneando y cambiando un poco el código de manera sencilla se puede incrustar sin problemas y queda como un Youtube o un Vimeo.

El código original siempre es así:

videos rtve wordpress 2

Y en código resulta algo así como:

<div style="width:100%;padding-top:64%;position:relative;border-bottom:1px solid #aaa;display:inline-block;background:#eee;background:rgba(255,255,255,0.9);" > <iframe frameborder="0" src="http://www.rtve.es/drmn/embed/video/3199980" name="La 1 estrena 'Cocineros al Volante'" scrolling="no" style="width:100%;height:90%;position:absolute;left:0;top:0;overflow:hidden;" ></iframe> <div style="position:absolute;bottom:0;left:0;font-family:arial,helvetica,sans-serif;font-size:12px;line-height:1.833;display:inline-block;padding:5px 0 5px 10px;"> <span style="float:left;margin-right:10px;"><img style="height:20px;width:auto;background: transparent;padding:0;margin:0;" src="http://img.irtve.es/css/rtve.commons/rtve.header.footer/i/logoRTVEes.png"></span> <a style="color:#333;font-weight:bold;" title="La 1 estrena 'Cocineros al Volante'" href="http://www.rtve.es/alacarta/videos/comunicacion-rtve/1-estrena-cocineros-volante/3199980/"><strong>La 1 estrena &#039;Cocineros al Volante&#039;</strong></a></div> </div>

2. Pues bien, eso quedará horrible en la web de WordPress, pero es fácil de arreglar. Hay que quitar prácticamente todo el código y quedarse sólo con el codigo iframe, o sea, esto:

<iframe frameborder="0" src="http://www.rtve.es/drmn/embed/video/3199980" name="La 1 estrena 'Cocineros al Volante'" scrolling="no" style="width:100%;height:90%;position:absolute;left:0;top:0;overflow:hidden;" ></iframe>

3. Aún así, se seguirá viendo mal, por lo que limpiamos un poco más el iframe en este segundo paso:

  <iframe frameborder="0" src="http://www.rtve.es/drmn/embed/video/3200585" name="La 1 estrena 'Cocineros al Volante'" width="600" height="360" style="width:600px;height:360px;" ></iframe>

4. Como veis, sólo hemos puesto un width y un height adicionales, que coincidan con los tamaños de los width y height de la etiqueta style. Aconsejamos este tamaño de 600 de ancho y 360 de alto, pero podéis poner las que más se ajusten a vuestras necesidades y diseño. También hemos limpiado el resto de atributos de style y, en resumen, podéis usar siempre esta plantilla y poner simplemente el id del vídeo a copiar, sin más líos:

  <iframe frameborder="0" src="http://www.rtve.es/drmn/embed/video/IDvideo" width="600" height="360"  style="width:600px;height:360px;" ></iframe>

5. Quedará así: