[SOLUCIONADO] Videos en HTML

[JuJoGuAl]

Buenas noches amigos actualmente busco maneras de insertar un video en una Web. use la tag VIDEO pero mi cliente dice que se "acopla" feo y le gustaria una mejor opción, aparte video no es soportada por todos los navegadores.


Conocen alguna alternativa que me permita mostrar un video y que sea soportado por varios navegadores?

[Rafael]

Si se acopla feo es que no le has dedicado tiempo en hacer un buen css para darle forma e integración.

Los videos no son soportados por todos los navegadores de escritorio viejos, por lo que en ese caso usas un drawback de flash. Fuera de eso la única opción es <video> o yutube.

En los móvlies no se va a activar un video para no consumirle a un usuario ancho de banda a lo loco. Ahí hay que darle play.

P.D. Ya olvídate de los navegadores viejos. Ese argumento ya es viejo.

[JuJoGuAl]

Bueno el video lo ves en aqui

y pues no la verdad no e tocado mucho el css de <video> y quisiera saber que opciones tengo (no se que tanto puedo hacerle)

Por eso me vi buscado otra opciones, incluso para tratar a los viejos navegadores.

Yo no los usara por mi, ya que me facilitaría mucho la vida, pero mi cliente insiste en detalles y ese es uno.

[fede5426]

En video podes usar muchos atributos de los que se usan en otros elementos.. es cuestión de pensar un poco.. así a las apuradas como para dar un ejemplo salió esto:

http://codepen.io/fede5426/pen/KpmGeJ

No es lo mejor definitivamente, los bordes son algo cutre y sin dudas el loop seria algo molesto jaja pero bueno era para dar un ejemplo nada más.

Algo que si te recomendaría es que separes un poco el video del header, que tenga mas espacio por arriba, queda muy desproporcionado con respecto al espacio que hay por debajo..

Saludos

PD: la parte que esta comentada en el CSS, queda un poco más sutil..

PD2: Acabo de ver que el menú de navegación que hay en el footer tiene una linea al comienzo pero no al final. Si esto no es a propósito, se pueden hacer 2 cosas para mejorarlo un poquito. Una es usar el selector "first-child" para quitarle el borde izquierdo al primer item de lista. La otra es usar el selector "last-child" para agregarle el borde derecho al el ultimo item de la lista. (Creo que la primera quedaria mejor) Opinión personal

Ahora si me fui, saludos.

[JuJoGuAl]

Iniciado por fede5426

En video podes usar muchos atributos de los que se usan en otros elementos.. es cuestión de pensar un poco.. así a las apuradas como para dar un ejemplo salió esto:

http://codepen.io/fede5426/pen/KpmGeJ

No es lo mejor definitivamente, los bordes son algo cutre y sin dudas el loop seria algo molesto jaja pero bueno era para dar un ejemplo nada más.

Algo que si te recomendaría es que separes un poco el video del header, que tenga mas espacio por arriba, queda muy desproporcionado con respecto al espacio que hay por debajo..

Saludos

PD: la parte que esta comentada en el CSS, queda un poco más sutil..

PD2: Acabo de ver que el menú de navegación que hay en el footer tiene una linea al comienzo pero no al final. Si esto no es a propósito, se pueden hacer 2 cosas para mejorarlo un poquito. Una es usar el selector "first-child" para quitarle el borde izquierdo al primer item de lista. La otra es usar el selector "last-child" para agregarle el borde derecho al el ultimo item de la lista. (Creo que la primera quedaria mejor) Opinión personal

Ahora si me fui, saludos.

Excelente! sos groxo, gracias por los consejos esos son separadores que coloque en cada

Código CSS:

a li:before{content: " | ";}
 

pero obvio eso no hace que el ultimo elemento tenga eso, probare con eso que me has mencionado.

Con respecto al video mi cliente quiere que se "adapte" mejor al fondo, que piensas al respeto?

[fede5426]

No se me ocurre la verdad, con opacity quizas?

http://codepen.io/fede5426/pen/XbRwgL

Más no se puede adaptar, es un video.. O por lo menos no se ocurre en este momento.

Para las listas podes hacer lo siguiente, supongamos que tu estructura es algo asi:

Código HTML:

<ul>
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a></li>
    <li><a href="">Item 4</a></li>
    <li><a href="">Item 5</a></li>
</ul>
 

El css deberia quedar más o menos asi:

Código CSS:

li{
    display:inline-block;
    padding:.2em .5em;
    border-right:1px solid #000;
}
 
li:last-child{
    border:0;
}
 

Con el padding en Y (.2em) definís la altura de la linea, y con el padding en X (.5em) la separación entre items..

http://codepen.io/fede5426/pen/xGdNPG

Y sino para tu caso, agrega esto al css y ya:

Código CSS:

li:first-child:before{
    content: "";
}
 

Por cierto, por el codigo css que dejaste veo que tu estructura es "ul> a> li".. eso está mal, es al reves.. "ul> li> a"

[Rafael]

Yo justo el problema que veo en tu páhina son los fondos. Es un diseño noventero. Pero es un tema aparte así que porfa abre otra pregunta.

[JuJoGuAl]

Iniciado por fede5426

No se me ocurre la verdad, con opacity quizas?

http://codepen.io/fede5426/pen/XbRwgL

Más no se puede adaptar, es un video.. O por lo menos no se ocurre en este momento.

Para las listas podes hacer lo siguiente, supongamos que tu estructura es algo asi:

Código HTML:

<ul>
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a></li>
    <li><a href="">Item 4</a></li>
    <li><a href="">Item 5</a></li>
</ul>
 

El css deberia quedar más o menos asi:

Código CSS:

li{
    display:inline-block;
    padding:.2em .5em;
    border-right:1px solid #000;
}
 
li:last-child{
    border:0;
}
 

Con el padding en Y (.2em) definís la altura de la linea, y con el padding en X (.5em) la separación entre items..

http://codepen.io/fede5426/pen/xGdNPG

Y sino para tu caso, agrega esto al css y ya:

Código CSS:

li:first-child:before{
    content: "";
}
 

Por cierto, por el codigo css que dejaste veo que tu estructura es "ul> a> li".. eso está mal, es al reves.. "ul> li> a"

Segui todos tus consejos y es mucho mejor ahora! Siempre es bueno que alguien Audite o opine sobre tu trabajo.

Iniciado por Rafael

Yo justo el problema que veo en tu páhina son los fondos. Es un diseño noventero. Pero es un tema aparte así que porfa abre otra pregunta.

Pues en eso estamos ambos de acuerdo pero cuando un cliente quiere algo no consigo sacarlo de esa "idea" que tiene nunca me gustó colocar un fondo de ese tipo a las webs por el tema de la adaptación sin contar el texto encima..

Pero bueno en efecto el tema habla sobre el VIDEO en el html y lo que hice para cerrar la idea es dejar la etiqueta VIDEO dandole formatos para que se vea mejor y olvidándome de la compatibilidad entre navegadores viejos