Cómo centrar un Iframe en HTML

[Kash07]

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

<div class="videoframe">

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

 

[JosueArriola]

Prueba con:

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

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

 

[Jorge Reyes]

<center><div class="videoframe">

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

Prueba así.

 

[avsiller]

<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

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

 

[shadowhck]

Agregale dimensiones, y con esto basta:

.clase {
  margin: 0 auto;
}

 

[Brandon Díaz]

Horribles las respuestas xD

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

HTML:

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

CSS:

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

 

[Kash07]

Agregale dimensiones, y con esto basta:

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.

<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>

.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]

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

<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>

.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:

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

 

[Kash07]

Puede ser porque el contenedor

videoframe

Lo ajusta a su medida.

Prueba esto:

.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]

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]

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]

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]

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]

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

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. :

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. :

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

Saludos !

 

[jonay]

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]

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

- - - Actualizado - - -

Antes del div:

videoframe

Agrega:

<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

style="border:1px solid #000"

😀

Tiene que quedar asi:

[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]

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:

[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]

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:

[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: