Hola Amigos! En este tutorial estaremos añadiendo una image cuatriculada alrededor del video de you tube en blogger.Sabemos que muchos usamos los videos de you tube para ilustarar o entretener de acuerdo al fin del nuestro sitio.Vamos a hacer a darle un toque elegante y atractivo a esos videos.
Chequea Buscadores con borde Redondo
Que Caracteristicas tiene este Tutorial :
1. La codificacion de CSS & HTML para mas rapida descarga .2. No hay necesidad de instalar una Plantilla o Widget .
3. Facil de poner en cualquier parte del Blog / Website
4. Codigo Actualizado para la compatibilidad de los navegadores
5. Solamente se requiere el cambio de un enlace del video de YouTube .
6. Dos Diferentes Estilos de Cuatriculas para video de YouTube
Como Añadir Bordes a Imagenes Alrededor del Video de YouTube
Copie Pegue Cualquier Codigo de Estilo en el HTML de tu Entrada Como muestra en imagen de abajo:
Estilo Cuatricula1
.youtube2-lordhtml
{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzM6BJV4CVT57DSdDXEf1bus1RwkJrLEPqyP6eSY0XVt3HyEYjBOG_YdB3ZFoo4gN8X8_UXSMxPLyKTfHff0HU39hqgxpWiC4tfuYoJcjYzzRIPAlAlxqYfpeYOqCXmwn5BTcoPxkiy8OY/s1600/youtube-lordhtml.png) no-repeat;
padding: 14px;
padding-top: 22px;
padding-left: 21px;
padding-right: 21px;
position: relative;
}
</style>
<div class="youtube2-lordhtml">
<iframe allowfullscreen="" frameborder="0" height="301" src="http://www.youtube.com/embed/FIYa4KXmjJM" width="503"></iframe><br />
</div>
Estilo Cuatricula 2
<style>
.youtube-lordhtml
{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJHK_JRbQjvi1bO7yadEHXf4ZYT5annPItXgHMwTxWjOuX_8mxWQbCqqxMOdZdWFBKNbqLHQRCBtHtmw8N9Qu4ryr5YK3r-QvgChNuBN_C0t9sHeLVtYUAWM7zm3ZEK7LMFgIfmMv7FZoL/s1600/background-lordhtml.png) no-repeat;
padding: 22px;
padding-top: 17px;
position: relative;
}
</style>
<div class="youtube-lordhtml">
<iframe allowfullscreen="" frameborder="0" height="352" src="http://www.youtube.com/embed/7pPeWtQR-Fk" width="525"></iframe><br />
<br /></div>
Solamente necesitas cambiar lo que esta sombreado en ROJO o Enlace de Video de YouTube .Si no sabes como conseguir el enlace insertado(Embed ) de Youtube para luego añadirlo en la cuatricula solo sigue estos pasos.
Puedes ir a la pagina de YouTube buscar el video que te guste ,debajo de este aparece el enlace de compartir das click en este luego das a insertar y copias las ultimas siglas.
Ejemplo:
Otra de las formas para hacerlo :
Reemplace Watch?v= con embed/ en tu enlace de youtube.Enlace Original http://www.youtube.com/watch?v=5TGFMpVm_RQ
Enlace Insertado http://www.youtube.com/embed/5TGFMpVm_RQ
Chequea Como añadir bordes a Titulo de Articulo
Hola exelente estilo pero una pregunta como hago para centrarlo porque ya intente y el video es el unico que se centra el estilo no ya que yo utilizo videos y me gusta mas que vallan centrados al post saludos espero tu respuesta
ResponderBorrarChequea que tengas el codigo adecuado y que no le falta ningun elemento.Luego chequea el alto y el ancho del video,puedes ajustas el tamano del mismo para que se centralize.
ResponderBorrar