🔒 Closed How to display an iframe by only clicking the button (HTML)

[DetroitGuru]

I am trying to display an iframe when a button is clicked. I got the following Javascript code:

var iframeShowing = false;

function show(event) { event.preventDefault();
    var iframe1 = document.getElementById("myIframe").style.display = "none" : "block";
    iframeShowing = !iframeShowing;
}

And here is the HTML of my page:

<button style="background-color: limegreen; border-radius: 4px; color: white; display: inline-block; font-family: sans-serif; font-size: 13px; font-weight: bold; line-height: 53px; text-align: center; text-decoration: none; width: 200px;" type="button" id="myIframe" onclick="show(event)">WATCH TRAILER</button>

<iframe frameborder="0" height="360" id="myIframe" marginheight="0" marginwidth="0" src="https://www.youtube.com/embed/4Yq15X_gj9A" width="640"></iframe>

When I tested the code, it works but the iframe always showing even I don't click the button. Please help me, I'd research on google and tried different code but nothing works.

Thanks in advance for your answers.

 

[0abstrakt]

It's like a pop up thing? After clicking the button, iframe will pop up?

 

[DetroitGuru]

Yes po. Hirap po kasi. Wala po akong background sa programing. Gumawa po kasi akong ng sarili kong website.

 

[DetroitGuru]

Ito po yung website ko po:
https://www.1piece-flix(.)tk

 

[0abstrakt]

That's okay bro, block po yong site. lagyan mo lang nang space para makita ko yong site mo.

 

[DetroitGuru]

Okay na po. Sana matulungan mo po ako. Kanina pa ako research ng research di ko talaga makuha.

 

[0abstrakt]

Wait meron na ako

 

[DetroitGuru]

Example Webpage po ito:
You do not have permission to view the full content of this post. Log in or register now.

 

[DetroitGuru]

[XX='0abstrakt, c: 281231, m: 1604494'][/XX]
Thanks po

 

[0abstrakt]

<button id="hideshow">Click</button>
<div class="panel">
<iframe src="You do not have permission to view the full content of this post. Log in or register now." class="content" style="border:0;display:none"></iframe>
</div>
<script>
$(document).ready(function(){
$('#hideshow').on('click', function(event) {
$('.content').toggle('show');
});
});</script>
<script src="You do not have permission to view the full content of this post. Log in or register now."></script>

 

[conviction]

oks naman yung 2nd HTML code pag try ko sa blogger

 

[DetroitGuru]

Ganda nmn. Ang linis

 

[DetroitGuru]

[XX='0abstrakt, c: 281270, m: 1604494'][/XX]

 

[0abstrakt]

thank you sir try mo lang yong bigay kong code

 

[DetroitGuru]

Gusto ko po di po siya rektang magpapakita agad hanggat di pa nakiclick yung button. Yun po yung mean ko.

 

[0abstrakt]

Dito ka mag try. You do not have permission to view the full content of this post. Log in or register now.

 

[DetroitGuru]

Sige po.

 

[0abstrakt]

oo ganyan nga. yan yong code. try mo

 

[DetroitGuru]

Sige po

 

[0abstrakt]

ayan na sir. You do not have permission to view the full content of this post. Log in or register now.