Cómo centrar un Iframe en HTML

Kash07 · 24 Oct 2012

Hola muy buenas, tengo este codigo Iframe y la verdad es que no tengo ni idea de como hacer que quede centrado.

Insertar CODE, HTML o PHP:

<div class="videoframe">

	<iframe height="300" width="400" src="DIRECCIóN VIDEO"></iframe></div>

JosueArriola · 24 Oct 2012

Prueba con:

Insertar CODE, HTML o PHP:

<div class="videoframe" style="text-align:center;">

	<iframe height="300" width="400" src="DIRECCIóN VIDEO"></iframe></div>

Jorge Reyes · 24 Oct 2012

<center><div class="videoframe">

<iframe height="300" width="400" src="DIRECCIóN VIDEO"></iframe></div></center>

Prueba así.

avsiller · 24 Oct 2012

jarm97171997 dijo:
<center><div class="videoframe">

<iframe height="300" width="400" src="DIRECCIóN VIDEO"></iframe></div></center>

Prueba así.

Esas es la mas sencilla pero el código es obsoleto se reemplazo por un div algo asi

Insertar CODE, HTML o PHP:

<div align="center">
---tu codigo---
</div>

shadowhck · 24 Oct 2012

Agregale dimensiones, y con esto basta:

Insertar CODE, HTML o PHP:

.clase {
  margin: 0 auto;
}

Brandon Díaz · 24 Oct 2012

Horribles las respuestas xD

La forma correcta es usando lo que dice el de arriba, pero quedaria asi al final:

HTML:

HTML:

<div class="videoframe"><iframe height="300" width="400" src="DIRECCIóN VIDEO"></iframe></div>

CSS:

Insertar CODE, HTML o PHP:

.videoframe {
width:400px;
margin:0 auto;
}

Kash07 · 25 Oct 2012

shadowhck dijo:
Agregale dimensiones, y con esto basta:

Satanarchist dijo:
Horribles las respuestas xD
La forma correcta es usando lo que dice el de arriba, pero quedaria asi al final:

Probé ambos y nada.. no hace nada.. Quizás sea por que el verdadero código parace ser algo distinto al incial.

Insertar CODE, HTML o PHP:

<div class="videoframe">

	<?php
	

	$site= SmartMetaBox::get('video_site');
	$id= SmartMetaBox::get('video_id');
	
		
	if ( $site == "youtube" ) { $src = 'http://www.youtube-nocookie.com/embed/'.$id; }  
	else if ( $site == "vimeo" ) { $src = 'http://player.vimeo.com/video/'.$id; }  
    else if ( $site == "dailymotion" ) { $src = 'http://www.dailymotion.com/embed/video/'.$id; }  
    else if ( $site == "bliptv" ) { $src = 'http://a.blip.tv/scripts/shoggplayer.html#file=http://blip.tv/rss/flash/'.$id; }  
    else if ( $site == "veoh" ) { $src = 'http://www.veoh.com/static/swf/veoh/SPL.swf?videoAutoPlay=0&permalinkId='.$id; }  
   else if ( $site == "metacafe") { $src= 'http://www.metacafe.com/fplayer/'.$id.'/movie.swf';}

    if ( $id != '' ) {  
         print '<iframe width="400" height="300" src="'.$src.'"></iframe>';  
        }

    
	?>
</div>

Insertar CODE, HTML o PHP:

.videoframe{
	background:#eee;
	padding:18px 18px;
	border:1px solid #ddd;
	margin:30px 0px 30px 0px;
	float:left;
}

.videoframe iframe{
	border:none;
}

Por que puede ser ? :S

shadowhck · 25 Oct 2012

Kash07 dijo:

Probé ambos y nada.. no hace nada.. Quizás sea por que el verdadero código parace ser algo distinto al incial.

Insertar CODE, HTML o PHP:

<div class="videoframe">

    <?php
    

    $site= SmartMetaBox::get('video_site');
    $id= SmartMetaBox::get('video_id');
    
        
    if ( $site == "youtube" ) { $src = 'http://www.youtube-nocookie.com/embed/'.$id; }  
    else if ( $site == "vimeo" ) { $src = 'http://player.vimeo.com/video/'.$id; }  
    else if ( $site == "dailymotion" ) { $src = 'http://www.dailymotion.com/embed/video/'.$id; }  
    else if ( $site == "bliptv" ) { $src = 'http://a.blip.tv/scripts/shoggplayer.html#file=http://blip.tv/rss/flash/'.$id; }  
    else if ( $site == "veoh" ) { $src = 'http://www.veoh.com/static/swf/veoh/SPL.swf?videoAutoPlay=0&permalinkId='.$id; }  
   else if ( $site == "metacafe") { $src= 'http://www.metacafe.com/fplayer/'.$id.'/movie.swf';}

    if ( $id != '' ) {  
         print '<iframe width="400" height="300" src="'.$src.'"></iframe>';  
        }

    
    ?>
</div>

Insertar CODE, HTML o PHP:

.videoframe{
    background:#eee;
    padding:18px 18px;
    border:1px solid #ddd;
    margin:30px 0px 30px 0px;
    float:left;
}

.videoframe iframe{
    border:none;
}

Por que puede ser ? :S

Puede ser porque el contenedor

videoframe

Lo ajusta a su medida.

Prueba esto:

Insertar CODE, HTML o PHP:

.videoframe{
     background:#eee;
     padding:18px 18px;
     border:1px solid #ddd;
     margin:30px auto;
     float:left;
}
.videoframe iframe {
     border:none;
}

Kash07 · 25 Oct 2012

shadowhck dijo:
Puede ser porque el contenedor

videoframe

Lo ajusta a su medida.

Prueba esto:

Insertar CODE, HTML o PHP:

.videoframe{ background:#eee; padding:18px 18px; border:1px solid #ddd; margin:30px auto; float:left; } .videoframe iframe { border:none; }

No hay ningun cambio visible, aparentemente. No hace nada.

shadowhck · 25 Oct 2012

Kash07 dijo:
No hay ningun cambio visible, aparentemente. No hace nada.

Para que funcione el elemento debe ser del tipo block y tener espacio a los lados, si se encuentra encerrado dentro de otro elemento sin espacio entonces este es el problema.

- - - Actualizado - - -

El codigo ese solo sirve para centrar elementos cuando existe espacio, porque no tiene sentido centrar algo cuando justamente abarca todo el espacio.

jonay · 25 Oct 2012

Si le pones float:left no se va a centrar, ya que le estás diciendo que se alinee a la izquierda y que se centre??.

Quitale el float:left y ponle margin:0 auto. :encouragement:

Kash07 · 25 Oct 2012

jonay dijo:
Si le pones float:left no se va a centrar, ya que le estás diciendo que se alinee a la izquierda y que se centre??.

Quitale el float:left y ponle margin:0 auto. :encouragement:

Tampoco a podido ser asi, se descuadra el div y el iframe ni se mueve..

jonay · 25 Oct 2012

Kash07 dijo:
Tampoco a podido ser asi, se descuadra el div y el iframe ni se mueve..

Es imposible, debes tener algo mas, pon una url para verlo online y ver que tienes. :encouragement:

Kash07 · 25 Oct 2012

shadowhck dijo:
El codigo ese solo sirve para centrar elementos cuando existe espacio, porque no tiene sentido centrar algo cuando justamente abarca todo el espacio.

jonay dijo:
Es imposible, debes tener algo mas, pon una url para verlo online y ver que tienes. :encouragement:

Espero que así puedas entender mejor el error que menciono.

Base

1. :

2. :

Cambios

3. :

4. :

jonay dijo:
Si le pones float:left no se va a centrar, ya que le estás diciendo que se alinee a la izquierda y que se centre??.

Quitale el float:left y ponle margin:0 auto. :encouragement:

Modificacion

5. :

Insertar CODE, HTML o PHP:

 6. : No puedo añadir mas imágenes, dejo link.
https://lh3.googleusercontent.com/-dlbSod25SoE/UInI3xYiJ1I/AAAAAAAACu4/byPsPdJutiw/s800/6.jpg

Saludos !

jonay · 25 Oct 2012

Si no pones una url donde verlo online no se te puede ayudar. Para centrar un div solo se tiene que utilizar un width:loquesea y margin:0 auto, también quitar el float si lo tienes aún puesto, asegúrate de que el contenedor del iframe lo tiene y tiene que centrarse. :encouragement:

shadowhck · 25 Oct 2012

Si dejaras URL en pocos segundos te sabria decir que modificar. Sin no quieres compartirla enviamenla por MP.

- - - Actualizado - - -

Antes del div:

videoframe

Agrega:

HTML:

<div class="clear"></div>

A la clase videoframe quitale el float: left, agregale margin: 30px auto; y width: 400px;

😀

- - - Actualizado - - -

Y para que no se desconfigure el diseño agregale al div que tiene clear

Insertar CODE, HTML o PHP:

style="border:1px solid #000"

😀

Tiene que quedar asi:

Insertar CODE, HTML o PHP:

[COLOR=#000080]<div class=[COLOR=#0000FF]"clear" [/COLOR][/COLOR]style="border:1px solid #000"[COLOR=#000080][COLOR=#0000FF][/COLOR]>[/COLOR][COLOR=#000080]</div>[/COLOR]

Kash07 · 25 Oct 2012

Muchas gracias a jonay y shadowhsk!! Solucionado el problema !! 😀

No he probado tu codigo Shadowhck, ya que me envió antes jonay uno y funcionó !

Dejo a continuacion la solución a este error:

Insertar CODE, HTML o PHP:

[I]Escrito por [B]jonay[/B][/I]

.video_single, añadele padding:30px 0, pon el width del iframe a 500 y en .videoframe elimina el float:left; añade width:500px y cambia el padding a 18px y el margin a margin:0 auto y listo.

shadowhck · 25 Oct 2012

Kash07 dijo:
Muchas gracias a jonay y shadowhsk!! Solucionado el problema !! 😀

No he probado tu codigo Shadowhck, ya que me envió antes jonay uno y funcionó !

Dejo a continuacion la solución a este error:

Insertar CODE, HTML o PHP:

[I]Escrito por [B]jonay[/B][/I] .video_single, añadele padding:30px 0, pon el width del iframe a 500 y en .videoframe elimina el float:left; añade width:500px y cambia el padding a 18px y el margin a margin:0 auto y listo.

Es basicamente lo mismo. :encouragement:

Cómo centrar un Iframe en HTML

Kash07

JosueArriola

Jorge Reyes

avsiller

shadowhck

Brandon Díaz

Kash07

shadowhck

Kash07

shadowhck

jonay

Kash07

jonay

Kash07

jonay

shadowhck

Kash07

shadowhck

Temas similares