What's new

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

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
 

Attachments

Last edited:
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
 

Attachments

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>
 
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)
 

Attachments

Last edited:
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 😁😁
 
@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.
 

Attachments

<script> 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 = ""; }); </script>
 
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>
 

Similar threads

Back
Top