Video descentrado (o no visible) en dispositivos móviles. html5.

#1 (**permalink**) 19/04/2015, 06:27

Hola a todos de nuevo.

Hace poco tenía una duda sobre cómo insertar un video en html5 centrado de fondo (sin que fuese a pantalla completa), y el usuario: mbm150 me lo resolvió perfectamente así:
http://www.forosdelweb.com/f4/video-fondo-centrado-1125192/

El problema es que en dispositivos móviles (iPhones, iPads, móviles Android, etc) no sale centrado, sino pegado a la izquierda.

Así es cómo se ve en un ordenador de sobremesa:
http://imageshack.com/a/img537/8660/dttbER.jpg

Así es cómo se ve en un iPad Mini:
http://imageshack.com/a/img538/971/hlngIY.jpg

Así es cómo se ve en un iPhone 4:
http://imageshack.com/a/img913/3767/46WgZQ.jpg

El ancho que yo le dí a la web es de 1024 pixeles, y el video tiene de ancho 1920 pixeles por 451 pixeles de alto.

Tengo tres preguntas, a ver si alguien me pudiese ayudar:

1. Aún siendo el ancho del video mayor que el ancho de la web, hay alguna manera de que toda la web y el video se vean centrados también en dispositivos móviles?

2. El vídeo no se visualiza en dispositivos móviles (está colgado en mp4, webm, y ogv). Que tengo que hacer para que se vea en dispositivos móviles?

3. Si veo que es un problema que se visualice el video en dispositivos móviles, qué tengo que hacer para que cuando se acceda a la web desde un dispositivo movil, se muestre el "poster" (centrado y no pegado a la izquierda) y no el video?

Os pego el código html y el css. Ojalá me podáis ayudar de nuevo. Gracias de antemano.

#2 (**permalink**) 19/04/2015, 06:29

CÓDIGO HTML

Código HTML:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="Generator" content="iWeb 3.0.1" />
    <meta name="iWeb-Build" content="local-build-20150410" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <meta name="viewport" content="width=1024" />
    <title>empresa</title>
    <link rel="stylesheet" type="text/css" media="screen,print" href="empresa_files/empresa.css" />
    <!--[if lt IE 8]><link rel='stylesheet' type='text/css' media='screen,print' href='empresa_files/empresaIE.css'/><![endif]-->
    <!--[if gte IE 8]><link rel='stylesheet' type='text/css' media='screen,print' href='Media/IE8.css'/><![endif]-->
    <script type="text/javascript" src="Scripts/iWebSite.js"></script>
    <script type="text/javascript" src="Scripts/iWebImage.js"></script>
    <script type="text/javascript" src="empresa_files/empresa.js"></script>
  </head>
  <body style="background: rgb(255, 255, 255) url(empresa_files/strange_bullseyes.jpg) repeat scroll top left; margin: 0pt; " onload="onPageLoad();">
    <div style="text-align: center; ">
    
<video id="spotempresa" loop autoplay preload poster="empresa_files/spotempresa.png" class="spotempresa">
        <source src="empresa_files/spotempresa.mp4" type="video/mp4" />
        <source src="empresa_files/spotempresa.webm" type="video/webm" />
        <source src="empresa_files/spotempresa.ogv" type="video/ogg" />
    </video>
    
      <div style="margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; overflow: hidden; position: relative; word-wrap: break-word;  background: transparent; text-align: left; width: 1024px; " id="body_content">
        <div style="float: left; margin-left: 0px; position: relative; width: 1024px; z-index: 0; " id="nav_layer">
          <div style="height: 0px; line-height: 0px; " class="bumper">*</div>
          <div style="clear: both; height: 0px; line-height: 0px; " class="spacer">*</div>
        </div>
        <div style="float: left; height: 0px; line-height: 0px; margin-left: 0px; position: relative; width: 1024px; z-index: 10; " id="header_layer">
          <div style="height: 0px; line-height: 0px; " class="bumper">*</div>
        </div>
        <div style="margin-left: 0px; position: relative; width: 1024px; z-index: 5; " id="body_layer">
          <div style="height: 0px; line-height: 0px; " class="bumper">*</div>
          <div id="id1" style="height: 50px; left: 0px; position: absolute; top: 0px; width: 1024px; z-index: 1; " class="style_SkipStroke shape-with-text">
            <div class="text-content graphic_shape_layout_style_default_External_1024_50" style="padding: 0px; ">
              <div class="graphic_shape_layout_style_default"></div>
            </div>
          </div>
          


          <div style="height: 38px; width: 161px;  height: 38px; left: 20px; position: absolute; top: 8px; width: 161px; z-index: 1; " class="tinyText style_SkipStroke_1 stroke_0">
            <a href="Inicio.html" title="Inicio.html"><img src="empresa_files/Logo%20empresax%20nuevo.png" alt="" style="border: none; height: 39px; width: 161px; " /></a>
          </div>

.
.
.
.
.
.
.

#3 (**permalink**) 19/04/2015, 06:31

CÓDIGO CSS:

Código CSS:

Ver original.spotempresa {
    width: 1920px;
    height: 451px;
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translate(-50%, 0px);
    -moz-transform: translate(-50%, 0px);
    -o-transform: translate(-50%, 0px);
    -ms-transform: translate(-50%, 0px);
    transform: translate(-50%, 0px);
}

#4 (**permalink**) 20/04/2015, 04:23

Alguien puede darme una respuesta, por favor?

AngelKrak · #5 (**permalink**) 20/04/2015, 06:32

para centrarlo trata con Margin: 0 auto o ponle Align="Center" a tu HTML

#6 (**permalink**) 20/04/2015, 07:30

Hola AngelKrak, gracias por responder.

Puedes decirme como y donde lo pondrías exactamente?

AngelKrak · #7 (**permalink**) 20/04/2015, 09:10

no tienes la pag subida? si no pasame los archivos completo en un .rar para poder ayudarte mejor ;)

#8 (**permalink**) 21/04/2015, 02:09

No tengo la página subida.

Quizá al haber hecho tres preguntas, la respuesta se hace más complicada.
Me interesa sobre todo la primera pregunta, la reformulo:

Pregunta:

- El ancho de la web es de 1024 px.
- El ancho del video es de 1920 px.
- En ordenadores de sobremesa se ve el video centrado.
- En dispositivos móviles no. Se ve alineado a la izquierda.

¿Cómo alineo el video (y el poster también) en el centro en dispositivos móviles?

El código html y el código css están más arriba.

NueveReinas · #9 (**permalink**) 21/04/2015, 07:21

Cita:

Iniciado por AngelKrak

no tienes la pag subida? si no pasame los archivos completo en un .rar para poder ayudarte mejor ;)

Esto no es Taringa! amigo, acá hay que solucionar (o intentar solucionar) las cosas en el mismo post, especialmente si alguien en el futuro viene con un problema similar desde algún buscador.

Lo digo porque ya van varias veces que haces lo mismo.

AngelKrak · #10 (**permalink**) 21/04/2015, 22:23

psz prueba con varias de estos :/

agrega class="ceenter" en tu Etiqueta HTML5 de <video>
y luego pon esto en tu CSS:

Código CSS:

Ver original.ceenter{
    margin-left: auto;
    margin-right: auto;
    display: block
}

si ese no funciona, prueba con este:

Código CSS:

Ver original.ceenter {
    margin: 0 auto;
  }

y NueveReinas siempre pido el codigo completo o pagina para yo mismo hacer las pruebas y ver que funciona y asi pasarle el resultado -_- nose que tiene de malo, si lo unico que ahi k hacer es pasar la Solución y es lo que hago siempre ._.

NueveReinas · #11 (**permalink**) 22/04/2015, 00:17

Y si no funciona lo que dijo AngelKrak: http://howtocenterincss.com/

pzin · #12 (**permalink**) 22/04/2015, 12:18

AngelKrak es muy simple; no pidas que te pasen las cosas en un archivo comprimido, si acaso pide código. Que es lo mismo, pero así se queda en el foro ese código.

No es la primera vez que te comentan esto ¿no?

AngelKrak · #13 (**permalink**) 22/04/2015, 12:29

pzin lee el comentario que deje en la solucion hasta abajo -_- ahi dije porque pido el codigo completo -_- aparte no tiene nada de malo el codigo completo esta al principio y al final siempre dejo la solución que me funciona a mi -_- asi que no le veo nada de malo -_-

PHPeros · #14 (**permalink**) 22/04/2015, 13:37

Me parece bien, pero una solución sin un planteamiento claro del problema (código), se queda en problema

Si tienes en cuenta eso, como si quieres que te pase un ejecutable, serás el único que lo descargue

pzin · #15 (**permalink**) 22/04/2015, 13:58

AngelKrak no es un problema de lectura por nuestra parte, sino un problema de comprensión por la tuya.

Si no lo entiendes, no lo hagas y limítate a pedir el código. Eso te basta para hacer tus pruebas; código.