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

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

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

下面的例子实现了上述方法：
示例 1：本示例实现了如何在 Bootstrap 模态中嵌入 YouTube 视频但不自动播放。

html

 

    
    
        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 源文件之后。

html

 

    
    
        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
                        
                        
                            
                            
                        
                    
                
        
    
    

 
                   

输出：

支持的浏览器：

• 谷歌浏览器
• 微软边缘
• 火狐
• 歌剧
• 苹果浏览器

jQuery 是一个开源 JavaScript 库，它简化了 HTML/CSS 文档之间的交互，它以其“少写，多做”的理念而广为人知。
您可以按照此 jQuery 教程和 jQuery 示例从头开始学习 jQuery。