CODEWITHSUNDEEP
javascriptjqueryhtmlbootstrap-modal
stevanusp
stevanusp

Reputation: 37

popup youtube video after page loaded

I want to know how we can popup a modal video after the page is loaded. i tried to edit this code that i get from codepen.io 

$(document).ready(function(){
  $("#myModal").on("hidden.bs.modal",function(){
    $("#iframeYoutube").attr("src","#");
  })
})

function changeVideo(vId){
  var iframe=document.getElementById("iframeYoutube");
  iframe.src="https://www.youtube.com/embed/"+vId;

  $("#myModal").modal("show");
}
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>youtube video - bootstrap modal popup</title>
  
  
  
  
  
</head>

<body>

  <script   src="https://code.jquery.com/jquery-1.12.3.min.js"   integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ="   crossorigin="anonymous"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<a onclick="changeVideo('OMDJY6Fh9YY')">video-1</a>
<a onclick="changeVideo('OMDJY6Fh9YY')">video-2</a>



<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
      
        <iframe id="iframeYoutube" width="560" height="315"  src="https://www.youtube.com/embed/OMDJY6Fh9YY" frameborder="0" allowfullscreen></iframe> 
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
  


</body>

</html>

The thing is i want the Popup automatically show after the page is loaded (sorry for my bad english. please correct my grammar and sentence) Thank you

Upvotes: 1

Views: 2371

Answers (2)

Rizkita
Rizkita

Reputation: 98

You may try this

<iframe id="iframeYoutube" width="100%" height="315" src="https://www.youtube.com/embed/2EVphJyNYTE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Just change the iframe on your code with that one. should be like this 

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>youtube video - bootstrap modal popup</title>
  
  
  
  
  
</head>

<body>

  <script   src="https://code.jquery.com/jquery-1.12.3.min.js"   integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ="   crossorigin="anonymous"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<a onclick="changeVideo('OMDJY6Fh9YY')">video-1</a>
<a onclick="changeVideo('OMDJY6Fh9YY')">video-2</a>



<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
      
        <iframe id="iframeYoutube" width="100%" height="315px" src="https://www.youtube.com/embed/2EVphJyNYTE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
  


</body>
<script>
  $(document).ready(function(){
  changeVideo('OMDJY6Fh9YY')
})

function changeVideo(vId){
  var iframe=document.getElementById("iframeYoutube");
  iframe.src="https://www.youtube.com/embed/"+vId;

  $("#myModal").modal("show");
}
</script>

</html>

Setting the width to 100% will make it more responsive. Have a try!

Upvotes: 1

Mohit Mutha
Mohit Mutha

Reputation: 3001

$(document).ready(function(){
  changeVideo('OMDJY6Fh9YY')
})

function changeVideo(vId){
  var iframe=document.getElementById("iframeYoutube");
  iframe.src="https://www.youtube.com/embed/"+vId;

  $("#myModal").modal("show");
}
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>youtube video - bootstrap modal popup</title>
  
  
  
  
  
</head>

<body>

  <script   src="https://code.jquery.com/jquery-1.12.3.min.js"   integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ="   crossorigin="anonymous"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<a onclick="changeVideo('OMDJY6Fh9YY')">video-1</a>
<a onclick="changeVideo('OMDJY6Fh9YY')">video-2</a>



<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
      
        <iframe id="iframeYoutube" width="560" height="315"  src="https://www.youtube.com/embed/OMDJY6Fh9YY" frameborder="0" allowfullscreen></iframe> 
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
  


</body>

</html>

Upvotes: 0

Related Questions