html - ejemplo - iframe video
¿Cómo hacer que un IFrame responda en iOS Safari? (8)
El problema con todas estas soluciones es que la altura del iframe nunca cambia realmente.
Esto significa que no podrá centrar elementos dentro del iframe usando Javascript, position:fixed; , o position:absolute; ya que el iframe sí mismo nunca se desplaza.
Mi solución detallada aquí es envolver todo el contenido del iframe dentro de un div usando este CSS:
#wrap {
position: fixed;
top: 0;
right:0;
bottom:0;
left: 0;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
De esta forma, Safari cree que el contenido no tiene altura y le permite asignar la altura del iframe correctamente. Esto también le permite colocar elementos de la manera que desee.
El problema es que cuando tiene que usar IFrames para insertar contenido en un sitio web, entonces en el mundo web moderno se espera que el IFrame responda también. En teoría es simple, simplemente haz uso de <iframe width="100%"></iframe> o establece el ancho de CSS en iframe { width: 100%; } iframe { width: 100%; } sin embargo, en la práctica no es tan simple, pero puede ser.
Si el contenido del iframe es totalmente receptivo y puede redimensionarse sin barras de desplazamiento internas, iOS Safari cambiará el tamaño del iframe sin problemas reales.
Si considera el siguiente código:
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9,10,11" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Iframe Isolation Test</title>
<style type="text/css" rel="stylesheet">
#Main {
padding: 10px;
}
</style>
</head>
<body>
<h1>Iframe Isolation Test 13.17</h1>
<div id="Main">
<iframe height="950" width="100%" src="Content.html"></iframe>
</div>
</body>
</html>
Con Content.html :
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9,10,11" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Iframe Isolation Test - Content</title>
<style type="text/css" rel="stylesheet">
#Main {
width: 100%;
background: #ccc;
}
</style>
</head>
<body>
<div id="Main">
<div id="ScrolledArea">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc malesuada purus quis commodo convallis. Fusce consectetur mauris eget purus tristique blandit. Nam nec volutpat augue. Aliquam sit amet augue vitae orci fermentum tempor sit amet gravida augue. Pellentesque convallis velit eu malesuada malesuada. Aliquam erat volutpat. Nam sollicitudin nulla nec neque viverra, non suscipit purus tincidunt. Aenean blandit nisi felis, sit amet ornare mi vestibulum ac. Praesent ultrices varius arcu quis fringilla. In vitae dui consequat, rutrum sapien ut, aliquam metus. Proin sit amet porta velit, suscipit dignissim arcu. Cras bibendum tellus eu facilisis sodales. Vestibulum posuere, magna ut iaculis consequat, tortor erat vulputate diam, ut pharetra sapien massa ut magna. Donec massa purus, pharetra sed pellentesque nec, posuere ut velit. Nam venenatis feugiat odio quis tristique.
</div>
</div>
</body>
</html>
Entonces esto funciona sin problemas en iOS 7.1 Safari. Puede cambiar entre paisaje y retrato sin ningún problema.
Sin embargo, simplemente cambiando Content.html CSS agregando esto:
#ScrolledArea {
width: 100%;
overflow: scroll;
white-space: nowrap;
background: #ff0000;
}
Obtienes esto:
Como puede ver, aunque el contenido Content.html es totalmente receptivo ( div # ScrolledArea tiene overflow: scroll set) y el ancho del iframe es 100%, el iframe aún toma el ancho completo del div # ScrolledArea como si el overflow no lo hiciera incluso existir. Demo
En casos como este, ¿el contenido del iframe tiene áreas de desplazamiento, la pregunta es cómo hacer que el iframe responda cuando el contenido del iframe tiene áreas de desplazamiento horizontal? El problema aquí no está en el hecho de que Content.html no responda, sino en el hecho de que iOS Safari simplemente cambia el tamaño del iframe para que div#ScrolledArea sea completamente visible.
El problema, al parecer, es que Mobile Safari se negará a obedecer el ancho de su iFrame si el documento que contiene es más amplio que el que ha especificado. Ejemplo:
En un navegador de escritorio, verá un iFrame y una Div ambos configurados en 300px. El contenido es más amplio para que pueda desplazar el iFrame.
Sin embargo, en Safari móvil, observará que el iFrame se expande automáticamente al ancho del contenido.
Supongo que esto es una solución para problemas de larga data con contenido desplazable dentro de una página. En el pasado, si tenía un gran iframe desplazable en un dispositivo táctil, se "atascaba" en el iframe, ya que eso sería desplazarse en lugar de la página en sí. Parece que Apple ha decidido que el comportamiento predeterminado de un iFrame es ''no scroll'' y se expande para evitarlo.
Una opción puede ser esta solución. En lugar de asumir que iFrame se desplazará, coloca el iframe en un DIV sobre el que tienes control y deja que se desplace.
ejemplo: http://jsbin.com/zakedaja/1
Ejemplo de marcado:
<div style="overflow: scroll; -webkit-overflow-scrolling: touch; width: 300px;">
<iframe src="http://jsbin.com/roredora/1/" style="width: 600px;"></iframe>
</div>
En safari móvil, ahora puede desplazar el contenido del iFrame completamente expandido a través del div que lo contiene.
El truco: Esto se ve realmente feo en un navegador de escritorio, ya que ahora tiene barras de desplazamiento dobles. Por lo tanto, es posible que deba hacer alguna detección de navegador con JS para evitar esto.
Estoy trabajando con ionic2 y la configuración del sistema es la siguiente-
******************************************************
Your system information:
Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-beta.10
Ionic CLI Version: 2.1.8
Ionic App Lib Version: 2.1.4
ios-deploy version: Not installed
ios-sim version: 5.0.8
OS: OS X Yosemite
Node Version: v6.2.2
Xcode version: Xcode 7.2 Build version 7C68
******************************************************
Para mí, este problema se resolvió con este código:
para html iframe tag-
<div class="iframe_container">
<iframe class= "animated fadeInUp" id="iframe1" [src]=''page'' frameborder="0" >
<!-- <img src="img/video-icon.png"> -->
</iframe><br>
</div>
Ver css del mismo as-
.iframe_container {
overflow: auto;
position: relative;
-webkit-overflow-scrolling: touch;
height: 75%;
}
iframe {
position:relative;
top: 2%;
left: 5%;
border: 0 !important;
width: 90%;
}
La propiedad de posición juega un papel vital aquí en mi caso.
posición: relativa;
¡¡También puede ayudarte a ti !!!
La solución para este problema es bastante simple y hay dos formas de hacerlo. Si tienes control sobre Content.html , simplemente cambia el div#ScrolledArea width CSS a:
width: 1px;
min-width: 100%;
*width: 100%;
Básicamente la idea aquí es simple, estableces el width en algo más pequeño que la ventana gráfica (ancho del marco iframe en este caso) y luego sobrescribes con min-width: 100% para permitir el width: 100% real width: 100% que iOS Safari por defecto sobrescribe El *width: 100%; está ahí para que el código permanezca compatible con IE6, pero si no te importa IE6 puedes omitirlo. Demo
Como puede ver ahora, el ancho div#ScrolledArea es en realidad 100% y el overflow: scroll; puede hacerlo y ocultar el contenido desbordado. Si tiene acceso al contenido del iframe, esto es preferible.
Sin embargo, si no tiene acceso al contenido del iframe (por alguna razón), puede utilizar la misma técnica en el propio iframe. Simplemente use el mismo CSS en el iframe:
iframe {
width: 1px;
min-width: 100%;
*width: 100%;
}
Sin embargo, hay una limitación con esto, debe desactivar las barras de desplazamiento con scrolling="no" en el iframe para que esto funcione:
<iframe height="950" width="100%" scrolling="no" src="Content.html"></iframe>
Si las barras de desplazamiento están permitidas, entonces esto ya no funcionará en el iframe. Dicho esto, si modificas Content.html en su lugar, puedes retener el desplazamiento en el iframe. Demo
Necesitaba una solución de navegador cruzado. Los requisitos fueron:
- necesario para trabajar en iOS y en otros lugares
- no tiene acceso al contenido en el iFrame
- Necesito que se desplace!
Aprovechando lo que aprendí de respecto al desplazamiento = "no" en iOS y esta publicación sobre cómo adaptar el contenido de iFrame a la pantalla en iOS aquí es a lo que terminé. Espero que ayude a alguien =)
HTML
<div id="url-wrapper"></div>
CSS
html, body{
height: 100%;
}
#url-wrapper{
margin-top: 51px;
height: 100%;
}
#url-wrapper iframe{
height: 100%;
width: 100%;
}
#url-wrapper.ios{
overflow-y: auto;
-webkit-overflow-scrolling:touch !important;
height: 100%;
}
#url-wrapper.ios iframe{
height: 100%;
min-width: 100%;
width: 100px;
*width: 100%;
}
JS
function create_iframe(url){
var wrapper = jQuery(''#url-wrapper'');
if(navigator.userAgent.match(/(iPod|iPhone|iPad)/)){
wrapper.addClass(''ios'');
var scrolling = ''no'';
}else{
var scrolling = ''yes'';
}
jQuery(''<iframe>'', {
src: url,
id: ''url'',
frameborder: 0,
scrolling: scrolling
}).appendTo(wrapper);
}
Solución CSS única
HTML
<div class="container">
<div class="h_iframe">
<iframe src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
CSS
html,body {
height:100%;
}
.h_iframe iframe {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
Otra demostración aquí con página HTML en iframe
Tuve un problema con el ancho en el panel de contenido creando una barra de desplazamiento horizontal para el iframe. Resultó que una imagen tenía un ancho más ancho de lo esperado. Pude resolverlo estableciendo todas las imágenes css max-width en un porcentaje.
<meta name="viewport" content="width=device-width, initial-scale=1" />
img {
max-width: 100%;
height:auto;
}
de hecho, para mí solo funcionó en iOS deshabilitar el desplazamiento
<iframe src="//www.youraddress.com/" scrolling="no"></iframe>
y tratar el sistema operativo mediante script.