27 febrero 2014

6 fondos para videos de Youtube

fondo para videos youtube

En la entrada de hoy, os mostraré cómo agregar un fondo a los vídeos de YouTube que utilizáis para incrustar en las entradas de blogger. En general, más de una vez hemos subido algún video y para incrustarlo en nuestras entradas hemos recogido el código que nos proporciona YouTube. Con esta entrada os muestro otro estilo que os ayudará a hacer vuestros vídeos más profesionales y atractivos.

Demostración de uno

Cómo colocar el video en cualquier fondo ?

En primer lugar, ir a youtube.com y buscar o elegir el vídeo que desee incrustar en tu blog. Ahora, mira la barra de direcciones y copia SOLO la numeración final de la URL a partir del signo = (para más detalles, compruebe la pantalla de abajo)

URL DE YOUTUBE

En segundo lugar, copia el código del efecto deseado, pégalo en una entrada de tu blog y cambia la numeración obtenida en el paso 1 por la numeración en rojo del código elegido.

"Ahora ya puedes publicar tu entrada y verás tu video de Youtube con un nuevo diseño "

Estilo Cine

<div style="background: url('https://lh6.googleusercontent.com/-cS7iLVbcfEA/Uwuc9yq_IMI/AAAAAAAAOQ0/ouuheIdBcns/w500-h329-no/imm-sound.jpg') no-repeat top left; height: 385px; margin: 0 auto; padding: 33px 0 0 92px; text-align: left; width: 540px;"><iframe width="310" height="165" src="http://www.youtube.com/embed/l-qwvSn6Euk" frameborder="0" allowfullscreen></iframe></div>
Estilo Cartel

<div style="background: url('https://lh3.googleusercontent.com/-uH8tI5qROY8/UwzfRznKqYI/AAAAAAAAORc/0ezPtlGWbtg/w478-h281-no/fotomontajes-divertidos.jpg') no-repeat top left; height: 385px; margin: 0 auto; padding: 24px 0 0 85px; text-align: left; width: 540px;"><iframe width="312" height="148" src="http://www.youtube.com/embed/l-qwvSn6Euk" frameborder="0" allowfullscreen></iframe></div>
Estilo Tablet

<div style="background: url('https://lh4.googleusercontent.com/-sDzntvCmd2g/Uwzj9nuYA8I/AAAAAAAAOSA/AtiSVED_PEY/w500-h438-no/11052141-new-tablet.jpg') no-repeat top left; height: 385px; margin: 0 auto; padding: 82px 0 0 99px; text-align: left; width: 540px;"><iframe width="322" height="212" src="http://www.youtube.com/embed/l-qwvSn6Euk" frameborder="0" allowfullscreen></iframe></div>
Estilo Televisión

<div style="background: url('https://lh6.googleusercontent.com/-0TuKXZzKj1M/Uw3dFzkES1I/AAAAAAAAOTs/bX1QyEF0E8I/w500-h234-no/tia.jpg') no-repeat top left; height: 385px; margin: 0 auto; padding: 22px 0 0 119px; text-align: left; width: 540px;"><iframe width="262" height="157" src="http://www.youtube.com/embed/l-qwvSn6Euk" frameborder="0" allowfullscreen></iframe></div>
Estilo Naturaleza

<div style="background: url('https://lh3.googleusercontent.com/-1T3rzHWYQ6c/Uw3fSoDm5OI/AAAAAAAAOT8/DpLseEC_qCI/w500-h375-no/11330_3.jpg') no-repeat top left; height: 260px; margin: 0 auto; padding: 95px 0 0 119px; text-align: left; width: 500px;"><iframe width="297" height="200" src="http://www.youtube.com/embed/l-qwvSn6Euk" frameborder="0" allowfullscreen></iframe></div>
Estilo PC Portatil

<div style="background: url('https://lh5.googleusercontent.com/-IOWiU4cwDhQ/Uw3hx8qny7I/AAAAAAAAOUM/WjFUFcXWq7w/w500-h391-no/samsung-portatil_r610-01.jpg') no-repeat top left; height: 380px; margin: 0 auto; padding: 25px 0 0 60px; text-align: left; width: 500px;"><iframe width="377" height="220" src="http://www.youtube.com/embed/l-qwvSn6Euk" frameborder="0" allowfullscreen></iframe></div>
Si quieres un fondo personalizado, manda imagen por Formulario de contacto y a la mayor brevedad se te diseña.


Escrito por:

Mi nombre es Antonio, soy sobre todo Sevillista y apasionado con los blog desde el 2007.

Sígueme en: | Facebook | Twitter | Google+

10 comentarios

Gracias Rosa, me alegro bastante que te hayan gustado.

Mas que excelente, muchas gracias. =)

Hacia tiempo que buscaba esto y gracias a ti puedo probarlo, ya te digo cosas ;)

Gracias Xisco, espero que te sea útil.

0ye si lo quiero poner en mi intro para mi pagian como lo hago ayudame porfavor este mi pagina http://blokeurbano26.blogspot.com/

Erick para ello debes eliminar todo este código:
<div style='margin-top:200px;'>
<!-- Inicio del contenido del intro -->
<div id='ElementosAudio'>
<iframe frameborder='0' height='310' src='http://www.youtube.com/v/H5QQfKjjQ7I?&autoplay=1&loop=1' width='545'></iframe>

Y sustituirlo por este otro:
<div style='margin-top:30px;'>
<!-- Inicio del contenido del intro -->
<div id='ElementosAudio'>
<div style="background: url('http://cl.aoc.com/cms/aoc/products_photos/ff1275607008f0b4e7e9d20500834302_large.png') no-repeat top left; height: 540px; margin: 0 auto; padding: 50px 0 0 60px; text-align: left; width:800px;">
<iframe frameborder='0' height='425' src='http://www.youtube.com/v/H5QQfKjjQ7I?&autoplay=1&loop=1' width='759'></iframe>

Hola de nuevo, a ver no consigo que funcione, pongo el codigo tal y como lo tienes y no sale nada, ¿a que puede deberse?

bueno al final lo he logrado, el problema estaba en que tenia que copiar el enlace que sale en el codigo para blogger, o sea pones compartir para blogger, te sale un cuadro con un codigo y ahi debemos coger el enlace parecido a este "//www.youtube.com/embed/180bwY_QkbI" entonces si funciona. Saludos.

Me alegro que al final lo hayas solucionado.
Muchas veces con paciencia se logra antes de que te lo expliquen.


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"