What's new
  • Welcome to PHCorner Forums. Take a moment to Sign up and gain unlimited access and extra privileges that guests are not entitled to, such as: All that and more! Registration is quick, simple and absolutely free. Join our community today!

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

Joined
Oct 1, 2017
Messages
1,109
Reaction
1,476
Age
23
, Last edited:
I am trying to display an iframe when a button is clicked. I got the following Javascript code:
JavaScript:
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:
HTML:
<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>
HTML:
<iframe frameborder="0" height="360" id="myIframe" marginheight="0" marginwidth="0" src="https://www.YôùTùbé.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.
 
, Last edited:
pop up window code
-thumbnail photo nalang siguro yung video at wag video embed
-edit nalang yung word na You tube
-edit width and height
<iframe frameborder="0" height="360" id="myIframe" marginheight="0" marginwidth="0" src="You do not have permission to view the full content of this post. Log in or register now..YôùTùbé.com/vi/4Yq15X_gj9A/0.jpg" width="640"></iframe>

<script type="text/javascript">
play= function(){
window.open('You do not have permission to view the full content of this post. Log in or register now.', 'poppage', 'toolbars=0, scrollbars=1, location=0, statusbars=0, menubars=0, resizable=1, width=720, height=480, left = 200, top = 50');
}</script>


<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="play()">WATCH TRAILER</button>
thumbnail embed
2.jpg

when clicked
1.jpg
 
1 Comment
P
PHC- BlackArmy
Maganda to sir pero pano po yung magdidisplay lang po siya pag naclick? Saka pwedi maclose.
 
Sa script naka autoplay pag click sa watch trailer button, pero pwedeng remove yung word na autoplay=1& sa script para pop up window lang na hindi magpleplay yung video

may sariling close button sa pop up window👇, edit mo nalang sa settings at force desktop sa mobile para same output kagaya PC
View attachment sam.mp4
 
1 Comment
P
PHC- BlackArmy
Yung ganto sir? Modal?

Code:
<a href="#" data-toggle="modal" data-target="#trailer" onclick="showTrailer();" class="btn btn-primary"><i class="menu-icon mdi mdi-video-vintage"></i>WATCH TRAILER</a>

<div class="modal-body">
                                         <div id="trailercode" style="display:none;">
                                             <iframe width="100%" height="250" src="https://YôùTùbé.com/embed/t3yFQPwV4so" allowfullscreen="" data-ioarzrhplp-handled="1"></iframe><div class="IOarzRhPlPOverlay" style="background:transparent;position:absolute;cursor:pointer;height:0px;width:0px;left:0px;top:0px;z-index:2"></div>
                                          
</div>
                                         <div class="form-group" id="viewtrailer">                                                                                 
</div>                                     </div>
 
, Last edited:
1.jpg

Pwedeng palitan mga:
Title: Pets United
Button: Watch Trailer
height: 340
edit: you tube na word at link

Result?
Pop up with close button👆

<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="You do not have permission to view the full content of this post. Log in or register now.">
<script src="You do not have permission to view the full content of this post. Log in or register now."></script>
<script src="You do not have permission to view the full content of this post. Log in or register now."></script>
</head>
<body>
<div class="container">
<h2>Pets United</h2>
<button type="button" class="btn btn-default btn-lg" id="button1">Watch Trailer</button>

<div class="modal fade" id="newModal" role="dialog">
<div class="modal-dialog">

<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Pets United</h4>
</div>
<div class="modal-body">
<p>

<iframe width="100%" height="340" src="You do not have permission to view the full content of this post. Log in or register now." allowfullscreen="" data-ioarzrhplp-handled="1"></iframe><div class="IOarzRhPlPOverlay" style="background:transparent;position:absolute;cursor:pointer;height:0px;width:0px;left:0px;top:0px;z-index:2">

</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>

</div>
</div>
</div>
</div>

<script>
$(document).ready(function(){
$("#button1").click(function(){
$("#newModal").modal("toggle");
});
});
</script>

</body>
</html>
with Thumbnail (same code used sa unang embed) plus copy mo nalang yung naunang button style na code (yung style values isingit mo sa button code sa taas) edit mo nalang sa line height 35px at width 150px
2.jpg

goodluck(y)
 
1 Comment
P
PHC- BlackArmy
Thank you so much sir.
 
Mga sir, patulong po neto. Di ko po siya mapagana sa blogger. Pero gumagana nmn po sa jsfiddle. Ito po code ko.

My HTML Page:
HTML:
<div class="form-group">
<a href="#" data-toggle="modal" data-target="#trailer" onclick="showTrailer();" 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;"> View Trailer</a>
</div>
<div class="modal fade" id="trailer" tabindex="-1" role="dialog" aria-labelledby="trailer" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="link'.$row['link_id'].'">BoBoiBoy Movie 2 (2019) Trailer</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">       <span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="trailercode" style="display:none;">
<iframe width="100%" height="250" src="https://YôùTùbé.com/embed/t3yFQPwV4so" allowfullscreen=""></iframe>
</div>
<div class="form-group" id="viewtrailer">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-sm" onclick="stopTrailer();" data-dismiss="modal">Close</button>
</div>
</div>
</div>
My Javascript Function:
JavaScript:
      function stopTrailer() {

        document.getElementById('viewtrailer').innerHTML = "";

      }

      function showTrailer() {

        document.getElementById('viewtrailer').innerHTML = document.getElementById('trailercode').innerHTML;
      }
    

      $("#trailer").on("hide.bs.modal", function () {
               document.getElementById('viewtrailer').innerHTML = "";
      });
Thanks in advance. Last na po to promise 😁😁
 
Comment
@Fiddle using the same code:

Screenshot_2020-09-16-12-13-31-47.png When Click

Wala pong problema sa jsfiddle. Working na working po siya kaso pag sa blogger nalabas po yung content niya.
 
P
PHC- BlackArmy
License Script:
JavaScript:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
Ito po yung whole HTML Page nung post ko po:
HTML:
<div style="text-align: center;">
<u>Movie Information</u></div>
<div style="text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.phc.onl/#forbidden#/-Knfx_ftJKnc/X2AuOwuGrXI/AAAAAAAABKA/viDlbTaB_BIHaJ2QmrJKnXVagsEKBCAeACLcBGAsYHQ/s1600/Ej0k1Ig.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="518" data-original-width="350" height="320" src="https://1.bp.phc.onl/#forbidden#/-Knfx_ftJKnc/X2AuOwuGrXI/AAAAAAAABKA/viDlbTaB_BIHaJ2QmrJKnXVagsEKBCAeACLcBGAsYHQ/s320/Ej0k1Ig.jpg" width="216" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<u><br /></u></div>
<div class="separator" style="clear: both; text-align: center;">
<span id="goog_1683074589"></span><span id="goog_1683074590"></span></div>
<div style="text-align: center;">
<u><br /></u></div>
<b>Movie Title:</b><br />
The Babysitter Killer Queen<br />
<br />
<b>Movie Genres:</b><br />
Comedy, Horror<br />
<br />
<b>Movie Cast:</b><br />
Bella Thorne, Leslie Bibb, Emily Alyn Lind<br />
<br />
<b>Movie Year:</b><br />
2020<br />
<br />
<div>
<!--Dito ko po siya ilalagay-->
<button id="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">WATCH TRAILER</button>
<br />
<div id="iframeHolder">
</div>
<script type="text/javascript">
$(function(){
    $('#button').click(function(){
        if(!$('#iframe').length) {
                $('#iframeHolder').html('<iframe frameborder="0" height="360" id="myIframe" marginheight="0" marginwidth="0" src="https://www.YôùTùbé.com/embed/BxqaP60DYJ0" width="640"></iframe>');
        }
    });   
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"></script>
<!--end-->
<br />
<br />
<div>
<left>
<a href="https://www.1piece-flixphc.onl/#forbidden#/search?max-results=12&amp;m=1/" style="background-color: dodgerblue; 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;">BACK TO PREVIOUS</a>
</left>
</div>
<br />
<div>
<form id="form1" method="post">
<label> Select A Player: <select id="location" onchange="setIframeSource()">
<option value="https://vidoza.net/eq2i4pwb4we0.html">vidoza.net</option>
<option value="https://uptostream.com/iframe/zaay85p57bvb">uptostream.com</option>
</select></label>
</form>
<script>
function setIframeSource() {
   var theSelect = document.getElementById('location');
   var theIframe = document.getElementById('myIframe');
   var theUrl;
 
   theUrl = theSelect.options[theSelect.selectedIndex].value;
   theIframe.src = theUrl;
}
</script>

<br />
<hr />
<br />
<iframe frameborder="0" height="360" id="myIframe" marginheight="0" marginwidth="0" src="https://vidoza.net/eq2i4pwb4we0.html" width="640"></iframe>
</div>
<br />
<br />
<hr />
<b><br /></b>
<b>Movie Plot:</b><br />
INSERTMOVIEPLOTHERE<br />
<br />
<div>
<left>
<a href="http://sh.st/st/c47ae6c6f56f8193fbffa2922b291ec3/1piece-flix-mdl.phc.onl/#forbidden#/p/blog-page_14.html?m=1" style="background-color: mediumslateblue; 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;">DOWNLOAD PAGE</a>
</left>
</div>
</div>
 
P
PHC- BlackArmy
Ito lang po talaga problem ko sir. Di ko na matiis kaya nagpatulong na po ako. 2 days ko ng inulit-ulit tas trial and error. Nag search na po ako sa google kaso di ko talaga ma kuha.
 

Online statistics

Members online
1,442
Guests online
1,869
Total visitors
3,311

Forum statistics

Threads
810,322
Messages
16,028,638
Members
1,435,290
Top