Question

我想知道如何在加载页面后弹出模态视频。我试图编辑我从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>

事情是我希望Popup在页面加载后自动显示（抱歉我的英文不好。请更正我的语法和句子）谢谢

Answer 1

你可以试试这个

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

只需使用该代码更改代码上的iframe即可。应该是这样的

＆＃13;

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

＆＃13;

将宽度设置为100％将使其响应更快。试一试！

Answer 2

＆＃13;

$(document).ready(function(){
  changeVideo('OMDJY6Fh9YY')
})

function changeVideo(vId){
  var iframe=document.getElementById("iframeYoutube");
  iframe.src="https://www.youtube.com/embed/"+vId;

  $("#myModal").modal("show");
}

＆＃13;

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

＆＃13;

页面加载后弹出youtube视频

2 个答案: