Resuelto: Safari no muestra el poster del video html5

Safari (y al parecer los móviles también) no muestran el poster del video que sirve como referencia de los videos.
Usando css podemos usar la misma imagen del poster para que se muestre detrás del video y lograr el mismo efecto.

<div class="contenido">
	<div class="contenedor_video">
		<video poster="poster-del-video.jpg" controls>
				<source src="el-video.mp4" type="video/mp4">
				Tu explorador no soporta la etiqueta de video.
		</video>	
	</div>
</div>
.contenedor {
	position: relative;
}

.contenedor_video video {
	width: 650px;
	height: 365px;
	position: relative;
	top:0;
	left:0;
	z-index: 2;
}

.contenedor_video::before {
	background: transparent url('poster-del-video.jpg') no-repeat top left;
	width: 650px;
	height: 365px;
	content: "";
	display: block;
	position: absolute;
	z-index: 1;
	top: 6px;
	left: 8px;
}

Puedes verlo en codepen.io

Listas desordenadas con FontAwesome

Cambiar los bullets de las listas desordenadas a iconos de FontAwesome es más fácil de lo que parece.

Hacemos una lista de ejemplo:

<ul>
    <li>Primer elemento de la lista</li>
    <li>Segundo elemento de la lista</li>
    <li>Tercer elemento de la lista</li>
</ul>

Y luego en el CSS la lista de cosas por hacer:

  1. Importar Font Awesome. En este ejemplo lo importamos desde un CDN pero lo puedes tener local si solo vas a necesitar unos iconos
  2. Quitar los estilos nativos de la lista con list-style:none;
  3. Poner el icono antes de la lista con li:before
/* importa fontawesome (o la que necesites) */
/* para esta prueba lo importé desde http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css */

@font-face{
    font-family:FontAwesome;
    src:url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.eot?#iefix) format('eot'),
	url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.woff) format('woff'),
	url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.ttf) format('truetype'),
	url(https://netdna.bootstrapcdn.com/font-awesome/2.0/font//fontawesome-webfont.svg#FontAwesome) format('svg');
    font-weight:400;font-style:normal;}

/* estilos para la lista y quitar el predeterminado */
ul { padding-left:20px; list-style:none; }
li { margin-bottom:10px; }

/* aqui viene la magia */
li:before {
    font-family: 'FontAwesome';
    content:"\f0a4";
    margin:0 5px 0 -15px;
}

Aquí está la lista en acción: http://jsfiddle.net/corchoweb/AHunC/

¿Cual es el icono mas raro que has usado en una lista?

Expande filas de tabla con jQuery – jExpand plugin

Janko At Warp Speed hizo un mini plugin para expandir filas dentro de una tabla (es decir los <tr> de una </table>) para poder expandir la información.

Lo puedes usar como plugin si crees que lo vas a usar en mas de una tabla o puedes escribir los comandos dentro de tu archivo personalizado de .js por que son muy breves.

Lee el artículo completo en: Expand table rows with jQuery – jExpand plugin – Janko At Warp Speed.

Y puedes ver el demo o descargartelo con ejemplos.

Arreglo: z-index de youtube y flash encima de todo

Trabajando hace unos días con un menú desplegable con jQuery noté que en ves de desplegarse por encima del video de youtube el menú se esconde detrás del video.

Primero pensé que era un problema de z-index, pero luego de pelear un rato con los posicionamientos y distintos valores de z-index pensé que sería un problema distinto.

El problema está en el browser pone los objetos flash (no solo los videos de youtube) encima de todos los objetos. http://kb2.adobe.com/cps/155/tn_15523.html y por eso hay que asignarle wmode=opaque o wmode=transparent al embed o código que va a producir el SWF.

En el caso de youtube esto se resuelve simplemente colocando ?wmode=opaque al final del código de embed de crea youtube para iframes.

El código original

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

El código con el wmode aplicado

<iframe width="560" height="315"
src="http://www.youtube.com/embed/xxxxxxx?wmode=opaque"
frameborder="0" allowfullscreen></iframe>

Esta explicación la hace detalladamente Max Morgan en su artículo Fix youtube iframe overlay and z-index issues y donde incluso propone una solucion para automatizarlo vía jQuery.

Luego hizo una adaptación para cuando el codigo ya tiene variables escritas en donde escribes el código al final de toda la dirección

Código con varibles

http://www.youtube.com/watch?v=1YmPooYpyQw?rel=0

Código con varibles y wmode

http://www.youtube.com/watch?v=1YmPooYpyQw?rel=0&wmode=opaque

Teniendo cuidado que es probable que luego de una variable es probable que el ?wmode tenga que ser con un “&” &wmode

Te sirvió? Soy todo ojos.

Actualización: Jair nos escribió una forma de cambiar el atributo wmode via jQuery

$(document).ready(function() {
	$(“iframe”).each(function(){
		var ifr_source = $(this).attr(‘src’);
		var wmode = “wmode=opaque”;
		if(ifr_source.indexOf(‘?’) != -1) {
			var getQString = ifr_source.split(‘?’);
			var oldString = getQString[1];
			var newString = getQString[0];
			$(this).attr(‘src’,newString+’?'+wmode+’&’+oldString);
		} else {
			$(this).attr(‘src’,ifr_source+’?'+wmode);
		};
	});
});