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

Question

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

Navigation

#1 by (1 votes)

2

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

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

javascript iphone iframe safari

asked by Cristina 21.02.2017 в 11:04

source

1 answer

access descendant properties of mySQLi in php Error Code: 1265. Data truncated for column 'Record_id' at row 1 0.109 sec

score 1 · Accepted 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>