Iframe from youtube does not work with onclick function and cancels javascript in safari


Hi, I have this problem: I have a button that calls a function using onclick and opens a div where there is an iframe from youtube. In all the browsers it works correctly less in safari, in the iphone it shows the iframe without giving the botom and nothing works. In the mac if it opens the iframe doing onclick but when I put the video in operation the botom of closing disappears and I can not close the div.

I do not know if I explain myself, I'm new to this, I would appreciate your help

I put the code


<div id="transformable2" title="Transformable" onClick="toggleIfrmabrir('transformablevideo')">
<p>VER VIDEO</p>
<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>


<script type="text/javascript"> 
function toggleIfrmabrir(id) {
function toggleIfrmcerrar(id) {


#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;}
asked by Cristina 21.02.2017 в 11:04

1 answer


This should work for you, although it is not the exact way you had it before:

    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>
answered by 21.02.2017 / 14:15