Hola ambigus. Pues por lo que veo en la seccion de videos, si te refieres al efecto de los videos que se encuentran en el centro de la web, por lo que veo, podrias hacerlo de la siguiente manera.
Puedes hacer una tabla de 5 columnas y dos filas, luego usas las propiedades colspan y rowspan para decir si abarcan mas de una fila o mas de una columna, si te fijas el primer video que aparece en la pantalla ocupa dos columnas con respecto a los dos videos de abajo, por lo que esta casilla de la tabla tendria la propiedad colspan="2"
Algo parecido pasaria con el video que ocupa dos filas en cuyo caso sera rowspan="2"
Por otro lado el efecto de pasar el raton por encima y que cambia la imagen, con el boton de play en medio lo puedes conseguir mediante javascript, llamando a una funcion que lo que haga sea cambiar la imagen de fondo de esa casilla de la tabla. A ver si un ejemplillo hace q te aclares un poco mejor, por que yo explicandome soy lo peor del mundo jejeje. Veamos.
Te voy a poner por ejmplo el primer video que ocupa dos columnas (el ejemplo de ocupar dos filas seria el mismo solo que en lugar de tener la propiedad colspan se usaria la propiedad rowspan como te comente antes)
Bueno antes de empezar te comento, que lo que yo llamo imagen1 seria la imagen que sale de fondo normalmente, e imagen2 seria la que sale cuando pasas el raton por encima.
Código HTML:
Ver original <td colspan="2" onmouseover='this.style.background="url(imagen2)"' onmouseout='this.style.background="url(imagen1)"' background="imagen1"></td>
Lo que vemos en este ejemplo es que mediante la propiedad background definimos que por defecto la imagen es imagen1, luego cuando pasamos el raton por encima (onmouseover) cambiamos la imagen a imagen2 y cuando sacamos el raton del interior de la celda (onmouseout) volvemos a mostrar la imagen1.
Espero haberte servido de ayuda. Para cualquier problema no dudes en contestar. Mucha suerte con tu proyecto.
Un saludo.
Pinty