La copa mundial de f?tbol est? a la vuelta de la esquina, y cuantos menos d?as faltan para esta fiesta deportiva m?s grande se vuelve la espera. Es por eso que te traemos estos gadgets de cuenta regresiva para Brasil 2014 para que puedas colocar en tu blog con tan solo copiar y pegar.
Los gadgets est?n hechos con timeTo, un plugin de jQuery, y los he puesto dentro de un iframe para que no tengas que preocuparte por su configuraci?n, ni por compatibilidad, ni nada; s?lo tienes que elegir el que m?s te guste y listo.
Son 4 dise?os a elegir, todos est?n adaptados al huso horario de S?o Paulo que es donde se jugar? el partido inaugural. Todos los contadores se detendr?n el 12 de junio de 2014 a las 17:00 horas -3 GMT.
Para poner uno de estos gadgets del mundial Brasil 2014, copia el c?digo del contador que m?s te guste, luego entra en Dise?o | A?adir un gadget | HTML/Javascript y pega el c?digo del contador que hayas elegido.
Recuerda que todos ellos son iframes, as? que no se puede modificar nada, esta vez no vamos a personalizar; son s?lo para copiar, pegar, y disfrutar :)
En la entrada anterior vimos c?mo insertar m?sica en el blog usando la etiqueta <audio>, lo mismo que videos con la etiqueta <video>. Ahora veremos c?mo crear un peque?o reproductor para reproducir m?ltiples canciones en HTML5, es decir, c?mo crear un playlist con el elemento <audio>
Este es un sencillo reproductor de MP3 que permite incluir m?ltiples canciones con loop de manera que cuando acabe una canci?n pasar? a la siguiente por si sola. El ?nico problema es que s?lo admite MP3 as? que en el navegador Opera no se escuchar?. Con el resto de los navegadores que admitan el elemento <audio> no habr? ning?n problema.
Puedes verlo en funcionamiento aqu? mismo, ya sea que des play al reproductor, o selecciones una canci?n de la lista.
Parece que fuera complejo pero no es as?, de hecho el script que usa es muy corto, pr?cticamente todo es CSS. Para poner este reproductor de m?ltiples canciones en tu blog entra en Plantilla | Edici?n de HTML y antes de </body> agrega lo siguiente:
Si ya tuvieras jQuery en tu plantilla entonces omite la primera l?nea. Luego, ah? mismo en la Edici?n HTML busca la etiqueta ]]></b:skin> y antes de ella pega los estilos:
#playlist, #player { width: 400px; /* Ancho de todo el contenedor */ padding: 20px; margin: 0 auto; display: block; text-align: center; } #player { /* Imagen de fondo del primer contenedor */ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitCTIjwOKK4umn935apAJ_nu2RzmyyFqXDaRgn6XDeYHaHLh4AdV-HPkP1_okPb65wjzomXWvKd1WfxNytLOmhcmwwVbfjBHxUpWwnz0gJmxyGxkXdYXiweRD_HnePfv7zmjfNA6LODXc/s300/bg.png); padding: 10px 20px; border-top-left-radius: 10px; border-top-right-radius: 10px; } audio { width:300px; /* Ancho del reproductor */ margin:0 auto; display: inline-block } #player:after { /* Imagen animada */ content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyh6QYku4EUea8yZ7YWn6HTk3QKVYlmikOzniQunGGzy5KNwvLlJDNrsTwNOx-2oDVKZxLXDA96HnlUG0EIM8XbziDr96cbzAJ0TRTSiWlUgqB0ydcEqgfPauJHUI2Cn4xraDRbq2Vcf8/s75/equalizador.gif); padding-left: 10px; } #playlist { margin: 0 auto 20px auto; display: block; background: #424242; /* Fondo del segundo contenedor */ border-top: 5px solid #9F111B; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; text-align: left; font-size: 12px; /* Estilos de fuente */ font-family: 'Trebuchet MS', Trebuchet, Verdana, sans-serif; font-weight: normal; } #playlist li, #playlist ul li { background-image: none; list-style-type: none; padding: 0; margin: 0; } #playlist li a { color: #CCC; /* Color de las canciones */ background: #222; /* Fondo de las canciones */ padding: 7px 5px; display: block; padding-left: 10px; text-decoration: none; } #playlist li a:hover{ background: #9F111B; /* Color de fondo al pasar el cursor */ text-decoration: none; } #playlist .active a { color: #B11623; /* Color de la canci?n activa */ font-style: italic; text-decoration: none; } #playlist .active a:before { content: "\25B6"; color: #CCC; font-style: normal; padding-right: 8px; } #playlist .active a:hover { color: #222; /* Color de la canci?n activa al pasar el cursor */ }
Por ?ltimo, en un gadget HTML/Javascript o en una entrada de tu blog agrega la estructura:
<div id='player'> <audio controls='' id='audio' preload='auto' tabindex='0' type='audio/mpeg'> <source src='URL de la primera canci?n' type='audio/mp3'/> Hola, tu navegador no est? actualizado y no puede mostrar este contenido. </audio> </div> <ul id='playlist'> <li class='active'><a href='URL de la primera canci?n'>Nombre de la primera canci?n</a></li> <li><a href='URL de la segunda canci?n'>Nombre de la segunda canci?n</a></li> <li><a href='URL de la tercera canci?n'>Nombre de la tercera canci?n</a></li> </ul>
Ah? deber?s poner las URLs de tus canciones donde se se?ala en color rojo. Nota que la URL de la primera canci?n se agrega dos veces, una dentro del reproductor y otra dentro de la lista de reproducci?n. Todas las URLs de tus canciones deber?n ser en formato MP3. En color azul agrega los nombres de las canciones. Si quisieras personalizarlo puedes hacerlo siguiendo las anotaciones que est? en color verde, ah? ver?s d?nde se cambian los tama?os, colores, fondos, etc.
La imagen del ecualizador es un GIF animado, puedes eliminarlo si crees que es muy llamativo, o puedes sustituirlo por el logotipo de tu blog o cualquier otra imagen.
Para a?adir m?s canciones s?lo agrega antes del </ul> una l?nea como esta por cada canci?n extra que quieras a?adir al reproductor:
<li><a href='URL de la otra canci?n'>Nombre de la otra canci?n</a></li>
Y si quisieras crear un reproductor de videos usando el elemento <video> igual en HTML5 entonces a?adir?as este c?digo antes de </body>
As? mismo omite la primera l?nea si es que ya tienes jQuery en tu plantilla. Luego, antes de ]]></b:skin> se agregan los estilos:
#vplaylist, #vplayer { width: 400px; /* Ancho de todo el contenedor */ padding: 20px; margin: 0 auto; display: block; text-align: center; } #vplayer { padding: 10px 20px; background: #000; /* Color de fondo primer del contenedor */ border-top-left-radius: 10px; border-top-right-radius: 10px; } video { width:400px; /* Ancho del reproductor */ padding-top: 10px; margin:0 auto; display: inline-block } #vplaylist { margin: 0 auto 20px auto; display: block; background: #424242; /* Color de fondo del segundo contenedor */ border-top: 5px solid #9F111B; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; text-align: left; font-size: 12px; font-family: 'Trebuchet MS', Trebuchet, Verdana, sans-serif; font-weight: normal; } #vplaylist li, #vplaylist ul li { background-image: none; list-style-type: none; padding: 0; margin: 0; } #vplaylist li a:hover{ background: #9F111B; /* Color de fondo al pasar el cursor */ text-decoration: none; } #vplaylist .active a { color: #B11623; /* Color de la canci?n activa */ font-style: italic; text-decoration: none; } #vplaylist .active a:before { content: "\25B6"; color: #CCC; font-style: normal; padding-right: 8px; } #vplaylist .active a:hover { color: #222; /* Color de la canci?n activa al pasar el cursor */ }
Y por ?ltimo en tu gadget o entrada del blog agrega esto:
<div id='vplayer'> <video controls='' height='224' width='400' id='video' preload='auto' tabindex='0' type='video/mp4'> <source src='URL del primer video' type='video/mp4'/> Hola, tu navegador no est? actualizado y no puede mostrar este contenido. </video> </div> <ul id='vplaylist'> <li class='active'><a href='URL del primer video'>Nombre del primer video</a></li> <li><a href='URL del segundo video'>Nombre del segundo video</a></li> <li><a href='URL del tercer video'>Nombre del tercer video</a></li> </ul>
Ah? tambi�n deber?s cambiar las URLs de los videos en color rojo pero esta vez los archivos ser?n en formato MP4. De igual forma, la URL del primer video va dos veces. Los nombres de los videos se cambian en la parte de color azul. En negrita ver?s d?nde se cambia el tama?o del reproductor.
Para a?adir m?s videos deber?s tambi�n agregar antes del </ul> una l?nea como esta:
<li><a href='URL del otro video'>Nombre del otro video</a></li>
El resultado ser? este:
De esta manera podr?s tener un reproductor de audio o video con playlist en HTML5. El ?nico problema ser? el navegador Opera, pero el resto de los navegadores modernos no tendr?n problema.
Cuando ponemos m?sica en el blog nos topamos con un problema, que no se escucha en dispositivos m?viles. Lo mismo puede pasar con algunos videos. Esto es porque en los blogs solemos usar reproductores hechos en flash para poner la m?sica (o el video) y la mayor?a de los dispositivos m?viles no soporta este formato.
Para algunos esto puede ser muy frustrante, y no es para menos considerando que en la actualidad un gran n?mero de usuarios navegan desde su tel�fono o tableta, as? que quienes tengan un podcast o m?sica en su blog se quedar?n con un gran n?mero de visitantes decepcionados por no poder escuchar el contenido.
?La soluci?n? Usar HTML5
Una de las tantas ventajas que nos ofrece el HTML5 es poder usar dos etiquetas para reproducir audio o video, las cuales por s? mismas son <audio> y <video>.
Estos elementos son soportados en todos los navegadores modernos incluyendo los navegadores de los dispositivos m?viles, con excepci?n de Internet Explorer 8 para abajo.
Su uso es bastante sencillo, s?lo tenemos que a?adir la etiqueta <audio> y la etiqueta <source> que es la fuente de donde se toma la direcci?n del archivo multimedia.
El c?digo es el siguiente:
<audio controls> <source src="URL del archivo mp3" type="audio/mpeg"> <source src="URL del archivo ogg" type="audio/ogg"> ?Hola usuario de Internet Explorer!, si tuvieras un navegador moderno estar?as escuchando una hermos?sima canci?n en lugar de estar leyendo esto :( </audio>
Ah? debes a?adir la URL de tu canci?n en formato MP3 y otra URL de tu misma canci?n pero en formato OGG. Esto es porque algunos navegadores no admiten aun el formato MP3, espec?ficamente el navegador Opera pues seg?n s� Firefox desde la versi?n 21 ya admite MP3.
Hay varios programas para PC y Mac que convierten archivos de audio y video en formato OGG, pero adem?s hay varios sitios en l?nea que tambi�n lo hacen, uno de mis favoritos es media.io
En cursiva ver?s que hemos a?adido un texto para los usuarios de navegadores antiguos ya que ellos no podr?n ver el reproductor pero s? el mensaje.
Ahora que si eres demasiado buena gente y no quieres que ellos se queden sin escuchar el contenido puedes a?adir dentro del mismo c?digo el elemento EMBED. De esta forma los usuarios de IE8 y anteriores aunque no puedan ver el reproductor en HTML5, podr?n ver el reproductor del plugin que tengan instalado en su navegador.
<audio controls> <source src="URL del archivo mp3" type="audio/mpeg"> <source src="URL del archivo ogg" type="audio/ogg"> <embed src="URL de tu archivo mp3" type="audio/mp3" width="200" height="100"/> </audio>
Los atributos del elemento AUDIO y VIDEO son: controls, autoplay, loop, muted, y preload
controls permite que se muestren los controles y el reproductor en s?.
autoplay hace que el archivo se reproduzca al cargar la p?gina.
loop reproducir? el archivo una y otra vez.
muted quitar? el audio del archivo.
preload define si el reproductor se debe cargar cuando se cargue la p?gina.
Un ejemplo del reproductor con varios atributos ser?a de esta forma:
<audio controls autoplay loop> <source src="URL del archivo mp3" type="audio/mpeg"> <source src="URL del archivo ogg" type="audio/ogg"> <embed src="URL de tu archivo mp3" type="audio/mp3" width="200" height="100"/> </audio>
En el caso del elemento VIDEO es igual, s?lo que aqu? establecemos un ancho y un alto.
<video width="320" height="240" controls> <source src="URL del archivo mp4" type="video/mp4"> <source src="URL del archivo ogv" type="video/ogg"> ?Hola usuario de Internet Explorer!, ?qu� crees? aqu? se est? reproduciendo un video incre?ble, pero no puedes verlo porque tu navegador es antiguo :( </video>
Y si quieres dar soporte completo para IE el c?digo ser?a as?:
<video width="320" height="240" controls> <source src="URL del archivo mp4" type="video/mp4"> <source src="URL del archivo ogv" type="video/ogg"> <object data="URL del archivo swf" width="320" height="240" type="application/x-shockwave-flash"> <param value="URL del archivo swf" name="movie"/> </object> </video>
Quiz? un inconveniente de usar estos reproductores de HTML5 sea tener que convertir los archivos en diferentes formatos, pero habiendo tantas herramientas para convertir formatos, como la que mencion� anteriormente, el problema se disminuye. En cuanto al aspecto, aqu? s? nos topamos con una traba, y es que cada navegador muestra el reproductor de una forma distinta.
Seguro pensar?s que con CSS podr?amos mejorarlo, pero la mala noticia es que no es as?. La ?nica forma de cambiar completamente su aspecto es usando Javascript. En la web hay muchas opciones y seguro m?s adelante publicaremos alguna de ellas. Por lo pronto, lo que s? podemos hacer es usar muy poquito Javascript y CSS por fuera del reproductor para crear algo como esto:
No es la gran cosa, pero mis habilidades inform?ticas no dan para m?s. Aun as? dejo el c?digo aqu? por si alguien lo quiere, pero ojo, no funcionar? en Opera ya que s?lo a?adiremos el archivo en MP3, y en cuanto a IE9 la barra de progreso no se ver? pero en cambio se mostrar? el porcentaje que se ha reproducido.
<div class='player-wrapper'> <audio id='player' src="URL del archivo MP3"></audio> <div class='player-controls'> <div class='player-thumb'> <img src='URL de la imagen miniatura' /> </div> <a onclick="document.getElementById('player').play()"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHDZy-YMrr0oplAlFtJxF_GPtM9vwpCiVc8LKLMWSQ0qqaHs8xz8Fb0JZ6iWj_cDbkAIaoCDw7R8Ki45La42mzejan6JGGsrC9Sgyi7Z09LndgCL4ldF2-lhj3UcHGpgpW2FhDL-3VmGmP/s28/icon_play.png' /></a> <a onclick="document.getElementById('player').pause()"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKr3wi3aKjYW7E1i_aYNKU1AHmt4F-UcsFquWYqYHFz-Msf_h1Tnpk4r_TCThPsBtufDQSGJx_wki-0k6IZ3rHXnFMnWoNTvj8ur1wqu_VaKZXQSAATaoFShOHqjLMmAdPvh1TGBglWaxc/s28/icon_pause.png' /></a> <a onclick="document.getElementById('player').volume+=0.1"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9461-B_8Ec90wEl-oclV0Pn2XTAiiTafJO9FS2FCIjTnzK9itqj3llbCkxbGx2NTxPxuG3tunQ1-IotY2-KXkXIHt-XiCLHhYtf8JOYdejZLmn0yI_b4DTIurDZ1fZS1h-5Gv-o8Q9kuh/s18/icon_increase.png' /></a> <a onclick="document.getElementById('player').volume-=0.1"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB4_BiSK3IyFMbf8wrVlWkE7yVUknB9EfnWgUWHu6T92_COQvg_GTZhZeKomrVnHb7HNKCtaOEZ-3_sU3-TR9gG-7rnA9fwhOXOSgyHpDDPJaz5jxErRu3XZKcgbR92p3ewyfkNGkuqTKW/s18/icon_decrease.png' /></a> <progress id='progress' max='100' value='0'><span>0</span>%</progress> </div> </div> <style> .player-wrapper { display: table; height: auto; width: 180px; /* Ancho del reproductor */ background: #FA5858; /* Color del reproductor */ border-radius: 13px; position: relative; margin: 0 auto; } .player-thumb img { width: 160px; /* Tama?o de la miniatura */ padding:10px 0; margin: 0 auto; text-align: center; } .player-controls { text-align: center; display: table-cell; vertical-align: middle; padding:0 0 10px; } .player-controls a { margin: 0 2px; cursor: pointer; cursor: hand; } .player-controls progress { width:75%; height: 7px; background: #FFF; color: #484848; margin-top: 5px; } ::-moz-progress-bar {background: #484848;} /* Color de fondo barra de progreso */ ::-webkit-progress-bar {background: #fff;} /* Color de fondo barra de progreso */ ::-webkit-progress-value {background: #484848;} /* Color del indicador */ </style> <script> var audio=document.getElementById('player');var pBar=document.getElementById('progress');audio.addEventListener('timeupdate',function(){var percent=Math.floor((100/audio.duration)*audio.currentTime);pBar.value=percent;pBar.getElementsByTagName('span')[0].innerHTML=percent},false); </script>
Usar HTML5 para incrustar audio me parece que es la mejor opci?n, no s?lo porque nos adentramos a la modernidad del HTML sino porque evitamos dejar fuera a los usuarios de dispositivos m?viles. Adem?s, al ser nativo del navegador consume much?simos menos recursos que cualquier otro reproductor. Y por si fuera tampoco tambi�n puede servir para reproducir audio en streaming, o como muchos lo conocen, radio en vivo.
El pie de foto es una peque?a y breve descripci?n que podemos a?adir a las im?genes que tengamos en el blog. Esta descripci?n da informaci?n precisa sobre la foto y nos ayuda a comprender dicha imagen. Por ejemplo, al a?adir la foto de una persona podemos insertar un pie de foto que d� el nombre de la persona, su cargo, un m�rito, o un hecho con el que se le relacione, de esta forma quien mire la foto sabr? qui�n es, o qu� hizo esa persona. Por el lado de SEO estas descripciones tambi�n nos ayudar a posicionar las im?genes en los buscadores ya que esta informaci?n tambi�n sirve para los robots.
Blogger nos da la opci?n de a?adir ese pie de foto (leyenda) cuando subimos la imagen, el problema es que el resultado es muy simple y poco llamativo, tanto que pasa casi desapercibido.
Cachorros en el jard?n
Lo que haremos ser? a?adir un pie de foto a las im?genes, pero a diferencia del pie de foto tradicional �ste estar? situado encima de la misma imagen y le agregaremos un fondo semitransparente, de modo que el resultado sea como este:
Si quieres tener un pie de foto como estos s?lo entra en Plantilla | Edici?n de HTML y antes de ]]></b:skin> agrega estos estilos:
.caption { padding: 0; width: 100%; position: relative; } .caption img { width: 100%; height: auto; display: block; padding: 0; border: 0; } .caption::before { content: attr(title); position: absolute; background: #EAF200; /* Color de fondo */ background: rgba(234, 242, 0, 0.6); /* Color de fondo en RGBA */ color: #000; /* Color del texto */ font-size: 14px; /* Tama?o del texto */ padding: 5px; right: 0; bottom: 0; left: 0; text-align: center; z-index: 1; }
Ahora cada vez que quieras ponerle un pie de foto a tus im?genes usa este c?digo:
<div style="width:400px; padding:10px; margin:0 auto;"><div class='caption' title='Agrega aquí el pie de foto'><img src='URL de la imagen'/></div></div>
Ah? ver?s d?nde se a?ade la descripci?n de la foto, as? como la URL de la imagen. El tama?o de la imagen se cambia modificando lo que est? en negrita.
En el primer c?digo que a?adimos est?n los estilos para el pie de foto. Ver?s que el color de fondo est? dos veces, primero en c?digo hexadecimal y luego en RGBA, esto es porque con RGBA podemos definir una transparencia, en este caso es de 0.6, pero en el caso de que el navegador (Internet Explorer como siempre) no soporte este estilo entonces tomar? el primero, el hexadecimal, pero sin la transparencia. En la secci?n Colores puedes obtener el c?digo tanto en hexadecimal como en RGB.
La imagen estar? centrada por defecto, pero si quisieras alinear la imagen a la izquierda para que quede rodeada de texto entonces usa este c?digo:
<div style="width:400px; padding:10px; clear: left; float: left;"><div class='caption' title='Agrega aquí el pie de foto'><img src='URL de la imagen'/></div></div>
En realidad es el mismo, s?lo hemos a?adido una flotaci?n a la izquierda y quitamos el margen. El resultado es el siguiente.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquet leo et erat posuere, at aliquet lorem commodo. Maecenas a gravida ligula. Nunc sed malesuada leo, et lacinia diam. Nullam bibendum justo libero, a varius mi suscipit vel. Maecenas commodo venenatis ante, eget ultricies nulla faucibus quis. Duis volutpat vulputate tortor volutpat euismod. Nam sed sapien a odio porttitor tincidunt. Curabitur mollis enim lacus, euismod fringilla lorem fringilla accumsan. Integer a erat ornare, molestie lorem sed, volutpat arcu.
Lo mismo podemos hacer si queremos alinear la imagen a la derecha.
<div style="width:400px; padding:10px; clear: right; float: right;"><div class='caption' title='Agrega aquí el pie de foto'><img src='URL de la imagen'/></div></div>
Y se ver? as?:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquet leo et erat posuere, at aliquet lorem commodo. Maecenas a gravida ligula. Nunc sed malesuada leo, et lacinia diam. Nullam bibendum justo libero, a varius mi suscipit vel. Maecenas commodo venenatis ante, eget ultricies nulla faucibus quis. Duis volutpat vulputate tortor volutpat euismod. Nam sed sapien a odio porttitor tincidunt. Curabitur mollis enim lacus, euismod fringilla lorem fringilla accumsan. Integer a erat ornare, molestie lorem sed, volutpat arcu.
?Y si quisi�ramos que el pie de foto aparezca s?lo cuando se pase el cursor por encima de la imagen?
En ese caso quitamos los estilos que hayamos puesto y en su lugar agregamos estos:
El resultado en cualquiera de los casos me parece que es mucho m?s atractivo que el nativo de Blogger (aunque en gustos se rompen g�neros), adem?s que podemos personalizarlo a nuestro gusto cambiando el color de fondo, tama?o, tipo del texto, y estilos extra que se le pueden agregar seg?n la creatividad de cada quien.
?Sab?as que insertar un video de YouTube hace que tu blog pese por lo menos 400 kB m?s? Esto es porque el iframe de YouTube tiene que descargar im?genes, scripts, estilos CSS, y hacer m?ltiples peticiones para que el reproductor y el video se muestren correctamente, aun cuando el usuario ni siquiera est� interesado en ver dicho video. Ahora imag?nate un usuario con Internet Explorer visitando un blog de videos: una combinaci?n fatal.
Google+ sab?a esto, y tambi�n sab?a que en su red social habr?a mucha inserci?n de videos que podr?an perjudicar la velocidad de carga de su p?gina, pero lo resolvieron de una manera muy sencilla. La soluci?n: que el iframe del video s?lo se cargue cuando el usuario d� click en �l. De esa forma evitamos que el video se cargue innecesariamente y consuma recursos que no requiere.
El sistema es muy simple en realidad, lo que hace el script que veremos a continuaci?n es mostrar s?lo la miniatura del video, y al darle click a la imagen �sta desaparecer? y entonces se cargar? el iframe que contiene el video. Puedes verlo con el elemento que est? a continuaci?n, es una imagen que al darle click cargar? el video.
Para implementar este sistema de carga de video en tu blog, entra en Plantilla | Edici?n de HTML y antes de </body> pega lo siguiente:
Lo que est? en negrita es el ancho y alto del video, lo puedes modificar al tama?o que quieras. Lo que est? en color rojo es donde deber?s poner el ID del video.
?Cu?l es el ID del video? Cuando abres un video de YouTube ver?s en la barra de direcciones una URL, los ?ltimos caracteres son el ID del video.
https://www.youtube.com/watch?v=GfxAEl15pDs
Dentro del primer c?digo ver?s una URL en color verde, esa es la imagen de play, la puedes cambiar por otra si lo deseas, procurando que la imagen mida 77x77 pixeles.
Como puedes ver, es un sistema pr?ctico y funcional para optimizar la velocidad de carga del blog, algo que tanto los robots de los buscadores y tus lectores agradecer?n, pues los videos no se cargar?n a menos que el usuario quiera verlos.
