2

Hola tengo este problema: tengo on botón que llama a una función mediante onclick y abre un div donde hay un iframe de youtube. En todos los navegadores funciona correctamente menos en safari, en el iphone muestra el iframe sin dar al botom y no funciona nada. En el mac si abre el iframe haciendo onclick pero cuando pongo el video en funcionamiento desaparece el botom de cerrar y no puedo cerrar el div.

No se si me explico, soy nueva en esto, agradeceria vuestra ayuda

Os pongo el código

HTML

<div id="transformable2" title="Transformable" onClick="toggleIfrmabrir('transformablevideo')">
<p>VER VIDEO</p>
</div>
<div id="transformablevideo"><iframe title="convertible" width="100%" height="480" src="//www.youtube.com/embed/gpQIfe4KOww" frameborder="0" allowfullscreen></iframe><br />
<input type="button" value="CERRAR" onClick="toggleIfrmcerrar('transformablevideo')"></div>

JAVASCRIPT

<script type="text/javascript"> 
function toggleIfrmabrir(id) {
document.getElementById(id).style.visibility="visible";}
function toggleIfrmcerrar(id) {
document.getElementById(id).style.visibility="hidden";}
</script>

CSS

#transformable2{ float:left; width:48%; height:auto; margin:20px 2% 0 0; cursor:pointer; }
#transformable2 p{ padding:15px; font-size:14px; border:1px solid #333; text-align:center; color:#333;}
#transformable2 p:hover{  color:#fff; background:#333;}

#transformablevideo{ visibility:hidden; position: absolute; left:0px; top:0px; width:100%; height:auto; background-color:#fff; margin:0 auto; display:block; z-index:600;}
#transformablevideo input{ width:150px; position:absolute; top:40px; left:15px; font-size:14px; color:#333; background-color:white; border:1px solid #333; cursor:pointer;}
#transformablevideo input:hover{ font-size:14px; color:white; background-color:#333;}
4
  • revisaste la consola? que error sale? Commented el 21 feb. 2017 a las 12:06
  • 1
    Hola.Tu código está bien. Lo he probado (Mac OS con Safari) y me cierra: aquí hice la prueba: deiverbum.org/ac/test.html Puede ser algo de la configuración de tu Safari.
    – A. Cedano
    Commented el 21 feb. 2017 a las 12:18
  • A mi me abre y me cierra en mi mac OS con safari, menos cuando le doy al play que inhabilita el boton de cerrar. Pero en los ipod y en los Iphone no me funciona sale el video automaticamente sin pulsar el botón de ver video, creo que el fallo está en que no reconoce el visibility hidden, estoy intentando solucionarlo pero no lo logro. Lo he mirado en distintos iphones y sigue con el problema
    – Cristina
    Commented el 21 feb. 2017 a las 12:50
  • Acabo de abrir tu prueba en el safari de mi Mac y abre y cierra menos cuando doy al play que inhabilita el botom de cerrar. Tabién lo he probado en un iphone 7 y un ipod y en estos me sale el video automáticamente sin dar al botom ver video y no funciona el play.
    – Cristina
    Commented el 21 feb. 2017 a las 13:05

1 respuesta 1

1

Esto te debe funcionar, aunque no es la manera exacta como lo tenías antes:

    function toggleVideo(state) {
    // if state == 'hide', hide. Else: show video
        var div = document.getElementById("popupVid");
        var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
        div.style.display = state == 'hide' ? 'none' : '';
        func = state == 'hide' ? 'pauseVideo' : 'playVideo';
        iframe.postMessage('{"event":"command","func":"' + func + '","args":""}','*');
    }
<p><a href="javascript:;" onClick="toggleVideo();">Click</a> para reproducir el video.</p>

<!-- Contenidos -->
<div id="popupVid" style="position:absolute;left:0px;top:87px;width:500px;background-color:#9fd90b;height:auto;display:none;z-index:200;">
    <iframe title="convertible" width="100%" height="480" src="//www.youtube.com/embed/gpQIfe4KOww" frameborder="0" allowfullscreen></iframe>   <br /><br />
   <button onClick="toggleVideo('hide');">CERRAR</a>

2
  • Muchísimas gracias!! A.Cedano con tu código funciona perfectamente en safari y en todos los disposítivos móviles. Te debo una!!. Si vienes por España no dudes en contactar conmigo!!
    – Cristina
    Commented el 21 feb. 2017 a las 13:45
  • Me alegro de que haya funcionado @Cristina . :) Saludos.
    – A. Cedano
    Commented el 21 feb. 2017 a las 15:24

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.