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