如何为 YouTube 视频使用 Bootstrap 模式并自动播放？

任务是在 Bootstrap 中为 YouTube 视频使用模态。在这里，我们将讨论两个主题，在 Bootstrap 模式中嵌入 YouTube 视频和在 Bootstrap 模式中使 YouTube 视频自动播放。使用以下方法在 Bootstrap 模式中嵌入 YouTube 视频非常容易和简单。但是当您关闭模态时有一个小问题，视频将继续在后台播放。

方法：

• 首先，复制代码以嵌入来自 YouTube 网站的视频。
• 然后，将代码放入.modal-body元素中。
• 要在关闭模式时自动停止视频，请使用 jQuery 动态切换 YouTube 视频 iframe src 属性的 URL 值。

下面的例子实现了上述方法：

示例 1：本示例实现了如何在 Bootstrap 模态中嵌入 YouTube 视频但不自动播放。

  

    
    
        Embedding YouTube video in Bootstrap modal
    
    
    
    
    
    
    
        .bs-example {
            margin: 20px;
        }
          
        .modal-content iframe {
            margin: 0 auto;
            display: block;
        }
    
    
        $(document).ready(function() {
            var url = $("#Geeks3").attr('src');
            $("#Geeks2").on('hide.bs.modal', function() {
                $("#Geeks3").attr('src', '');
            });
            $("#Geeks2").on('show.bs.modal', function() {
                $("#Geeks3").attr('src', url);
            });
        });
    

  

    
          
        GeeksforGeeks  
    
  
          
        How to embed YouTube video in Bootstrap modal?
    
        
            Launch Modal
  
            
                
                    
                        
                            ×
                            GeeksforGeeks
                        
                        
                            
                            
                        
                    
                
          
      
    

  

输出：

示例 2：此示例实现了如何在 Bootstrap 模态中自动播放 YouTube 视频。要使 YouTube 视频在 Bootstrap 模式中自动播放，我们必须将?autoplay=1放在附加的 Youtube 源文件之后。

  

    
    
        Embedding YouTube video in Bootstrap modal
    
    
    
    
    
    
    
        .bs-example {
            margin: 20px;
        }
          
        .modal-content iframe {
            margin: 0 auto;
            display: block;
        }
    
    
        $(document).ready(function() {
            var url = $("#Geeks3").attr('src');
            $("#Geeks2").on('hide.bs.modal', function() {
                $("#Geeks3").attr('src', '');
            });
            $("#Geeks2").on('show.bs.modal', function() {
                $("#Geeks3").attr('src', url);
            });
        });
    

  

    
         
        GeeksforGeeks 
    
  
         
        How to embed YouTube video in Bootstrap modal?
    
        
            Launch Modal
  
            
                
                    
                        
                            ×
                            GeeksforGeeks
                        
                        
                            
                            
                        
                    
                
        
    
    

  
                    

输出：