如何对YouTube视频使用Bootstrap模态并自动播放？

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

方法：

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

以下示例实现了上述方法：

示例1：此示例实现了如何将YouTube视频嵌入Bootstrap模式，但不会自动播放。

  

    
    
        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视频。要在Bootstrap模式下自动播放YouTube视频，我们必须在附加的Youtube源文件后放置?autoplay = 1。

  

    
    
        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
                        
                        
                            
                            
                        
                    
                
        
    
    

  
                    

输出：