Problemas con iFrame y Responsive design.

[RAZGRIZ24]

Hola compañeros!

Estoy teniendo bastantes problemas con un responsive design que tengo entre manos.

Aquí lo tenéis, para que podáis situaros:

development.mastertrading.es

Si estáis en un ordenador lo más probable es que os aparezca bien maquetada (ahora pondré un pantallazo de cómo debe ser).

El problema lo estoy teniendo con pantallas menores: smartphones, pantallas antiguas de resolución 4:3 y algunas tablets... paso a explicaros mi problema:

En pantallas menores, el ipad de la mitad de la web se hace demasiado grande (es un background de un container) y pasa a ocupar casi toda la sección media. Me encuentro qué:

El formulario de e-mail y botón, o bien pasa a ocupar la lína siguiente al vídeo y consecuentemente desplaza el resto de la página, haciéndola ver horrible :lol: O bien queda donde debe estar, pero por encima del fondo; lo cual hace que quede antiestético e incluso ilegible.

La solución que he pensado es usar media-queries y también porcentajes, lo he intentado y no ha resultado porque no soy capaz de emplazar bien el iFrame dentro de la tablet, es por ello que lo he dejado en su estado original y vengo a ver qué se os ocurre. En el futuro será mucho más fácil porque el vídeo será de una fuente propia y no de youtube, pero necesito una solución temporal.

Os pongo el código, que me había olvidado jajaja

Código HTML:

<section id="MasterTrading Presentación" class="index-main-section">
    <!--ahora una sección interior que contiene el vídeo y el capture-->
    	<section id="MasterTrading Video" class="index-section-video">
        <!-- wrapping div para el vídeo de presentación-->
        	<div id="Video de presentacion" class="div-video-presentacion">
            	<iframe width="441" height="332" src="//www.youtube.com/embed/E9XQ2MdNgKY" frameborder="0" allowfullscreen></iframe>
            </div>
            <!--El meme viene ahora-->
            <div id="Meme" class="div-meme-index">
            <!--texto-->
            	<div class="div-meme-index-texto">
                	Yo opero en directo,
                    <br />
                 Tu <span class="span-meme">observas, aprendes y ganas.</span>
                </div>
                <div class="div-meme-index-capture">
                	<input type="text" placeholder="e-mail" class="form-capture-input">
                    <input type="submit" value="ENTRAR" class="form-capture-submit">
                    </div>
                </div>
        </section>
    </section> 

Código CSS:

.index-main-section{
    width:100%;
    height:600px;
    background-image:url(index-files/cafeteria.jpg);
    background-size:cover;
    background-repeat:no-repeat;
}
.index-section-video{
    width:100%;
    height:600px;
    padding-top:74px;
    background-image:url(index-files/ipad-no-bc-2.png);
    background-repeat:no-repeat;
    background-position:left;
}
.div-video-presentacion{
    width:441px;
    height:332px;
    margin-top:20px;
    margin-left:186px;
    float:left;
    position:relative;
}
.div-meme-index{
    width:25%;
    float:right;
    margin-right:10%;
    margin-top:10em;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;
}
.div-meme-index-texto{
    font-size:23px;
    font-weight:200;
    color:#FFF;
    text-align:center;
    width:100%;
}
.span-meme{
    font-weight:700;
    color: #00e01f;
    text-shadow:1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0        -1px 0 #000
}
.div-meme-index-capture{
    margin-top:30px;
}
.form-capture-input{
    width:70%;
    float:left;
    height:40px;
    border-radius:20px;
    margin-top:5px;
    background:#FFF;
    border:1px solid #555;
    padding:0 25px;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;
}
.form-capture-submit{
    width:25%;
    height:50px;
    font-size:0.8em;
    background:#00e01f;
    border:1px solid #555;
    border-radius:15px;
    margin-left:2.5%;
    -webkit-transition: background 0.3s,
                        font-size 0.3s;
    -moz-transition: background 0.3s,
                        font-size 0.3s;
    -transition: background 0.3s,
                        font-size 0.3s;
}
 

Muchas gracias chicos, os adoraré si damos con la solución



Aquí está la maquetación como más o menos debería quedar (el video es de ejemplo)

[juangemelo01]

¿cual es el uso que le das al iframe en tu web?
yo te recomiendo que no lo uses mucho a no ser que realmente sea necesario
Dale un vistaso a esto
http://webdesignerwall.com/tutorials...ign-in-3-steps

[RAZGRIZ24]

Iniciado por juangemelo01

¿cual es el uso que le das al iframe en tu web?
yo te recomiendo que no lo uses mucho a no ser que realmente sea necesario
Dale un vistaso a esto
http://webdesignerwall.com/tutorials...ign-in-3-steps

Hola compi, muchas gracias por tu respuesta me parece muy interesante el enlace

El iFrame lo uso para emplazar un vídeo que estará en youtube tan pronto termine la producción. Por otro lado puedo hacer ese vídeo con un source en local; pero creo que cara al SEO es mejor usar algo proveniente de youtube.

No obstante ya me he decantado por emplear media queries, ahora sólo tengo que ponerme a ello cuándo tenga un rato

Muchas gracias, iré contando y lo marcaré como solucionado si sale bien