2. 程式人生 > >Bootstrap 3 模態框播放視訊

Bootstrap 3 模態框播放視訊

阿新 • • 發佈：2018-11-19

 

I'm trying to use the Modal feature from Bootstrap 3 to show my Youtube video. It works, but I can't click on any buttons in the Youtube video.

Any help on this?

Here's my code:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

<div id=

"link">My video</div>

 

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

    <div class="modal-dialog">

        <div 

class="modal-content">

            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal"

 aria-hidden="true">×</button>

            </div>

            <div class="modal-body">

                <iframe width="400" height="300" frameborder="0" allowfullscreen=""></iframe>

            </div>

        </div>

    </div>

</div>

 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<script>window.jQuery || document.write('<script src="js/jquery-1.10.1.min.js"><\/script>')</script>

<script src="js/bootstrap.min.js"></script>

<script>

    $('#link').click(function () {

        var src = 'http://www.youtube.com/v/FSi2fJALDyQ&autoplay=1';

        $('#myModal').modal('show');

        $('#myModal iframe').attr('src', src);

    });

 

    $('#myModal button').click(function () {

        $('#myModal iframe').removeAttr('src');

    });

</script>

 

I found this problem (or the problem I found and described at https://github.com/twbs/bootstrap/issues/10489) related to CSS3 transformation (translation) on the .modal.fade .modal-dialog class.

In bootstrap.css you will find the lines shown below:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

.modal.fade .modal-dialog {

  -webkit-transform: translate(0, -25%);

      -ms-transform: translate(0, -25%);

          transform: translate(0, -25%);

  -webkit-transition: -webkit-transform 0.3s ease-out;

     -moz-transition: -moz-transform 0.3s ease-out;

       -o-transition: -o-transform 0.3s ease-out;

          transition: transform 0.3s ease-out;

}

 

.modal.in .modal-dialog {

  -webkit-transform: translate(0, 0);

      -ms-transform: translate(0, 0);

          transform: translate(0, 0);

}

 Replacing these lines with the following will show the movie correctly (in my case):

1

2

3

4

5

6

7

8

9

10

.modal.fade .modal-dialog {

  -webkit-transition: -webkit-transform 0.3s ease-out;

     -moz-transition: -moz-transform 0.3s ease-out;

       -o-transition: -o-transform 0.3s ease-out;

          transition: transform 0.3s ease-out;

}

 

.modal.in .modal-dialog {

 

}

 http://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal

 

相關推薦

Bootstrap 3 模態框播放視訊

  I'm trying to use the Modal feature from Bootstrap 3 to show my Youtube video. It works, but I can't click on any buttons in the Youtube vide

bootstrap 模態框 video視訊測試

連結:https://files.cnblogs.com/files/tele-share/%E8%A7%86%E9%A2%91%E6%B5%8B%E8%AF%95.7z 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head

bootstrap刪除模態框彈出並詢問是否刪除【通用刪除模態框】

cnblogs iss 是否 png con btn ima 點擊 void 　　 　　普通的詢問是否刪除的對話框比較low，可以利用bootstrap的模態框代替普通的對話框來實現刪除。 效果: 　　點刪除的時候彈出模態框詢問是否刪除，點確認的時候將需要刪除的

Bootstrap使用模態框modal實現表單提交彈出框

-s 彈出層 lib 前端 close css 狀態 upd 技術 Bootstrap 模態框（Modal）插件 模態框（Modal）是覆蓋在父窗體上的子窗體。通常，目的是顯示來自一個單獨的源的內容，可以在不離開父窗體的情況下有一些互動。子窗體可提供信息、交互等。如果您想要

zbb20171215 bootstrap model 模態框

每次 ots function all log 點擊 rap tab dex 1.頁面中添加modal <!-- 模態框（Modal） --> <div class="modal fade" id="showModal" tabindex="-1" r

bootstrap modal模態框

bootstrap modal模態框 因為專案中用到了bootstrap table 顯示錶格且要為每一行設定一個按鈕要就能檢視資訊，所以就直接用bootstrap帶的模態框，但是有個缺點就是非同步的時候比較慢，體驗不是特別的好，至於後來換哪種彈框在本文結尾會敘述。 modal bo

bootstrap的模態框的使用

【1】模態框的編寫 <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="width: 690px; display: none;">

datatables、bootstrap的模態框關閉，用JQuery清空form資料

//關閉模態框時清空資料 $(function (){ $('#myModalId').on('hidden.bs.modal', function (){ $(':input','#myFormId').not(':button,:submit,:res

Bootstrap開啟模態框後對資料處理(標記模態框的開啟與關閉狀態)

JS用全域性變數標記狀態，方法中動態修改全域性變數以標記狀態是一個重要思想。   　　需求:組合條件查詢資料，查詢完之後填充到模態框中，開啟模態框，模態框中有組合條件查詢，此時查詢只需要更新模態框表格資料不需要開啟模態框，也就是讓模態框開啟方法執行一次。 (點查詢的時候只更新資料不會再次開啟模

PageHelper與bootstrap的模態框,以及jquery程式碼實現分頁查詢顯示以及Echart的使用

模板下載地址:https://files.cnblogs.com/files/han-guang-xue/%E5%88%86%E9%A1%B5%E6%A8%A1%E6%9D%BF.zip jquery程式碼 var pn; var maxPn; $(function () { loading

bootstrap-modal 模態框顯示一下又消失問題解決以及模態框的基本使用方法

一：問題場景 在開發中給button一個點選事件通過方法中的$('#id').modal('show')方式開啟模態框，發現開啟後模態框顯示一下又消失了。 二：解決方法 經過查詢大概有下面幾種方式，我的問題相對好解決採用的是第4個方法解決 1、bootstrap.min.js與mod

bootstrap2.3-模態框

modal用法 <a class="btn btn-primary" data-toggle="modal" data-target="#MyModal" aria-hidden="true" >open</a> <!--

Bootstrap -- 外掛: 模態框、滾動監聽、標籤頁

Bootstrap -- 外掛: 模態框、滾動監聽、標籤頁 1. 模態框（Modal）: 覆蓋在父窗體上的子窗體。 使用模態框： <!DOCTYPE html> <html> <head> <meta http-equiv="Content

Angular6+ngx-bootstrap之模態框的使用（三）

方法一： app.module.ts import {ModalModule} from 'ngx-bootstrap/modal'; ModalModule.forRoot() app.component.html <button class="btn btn-o

Bootstrap中模態框多層巢狀時滾動條問題

在使用Bootstrap中模態框過程中，如果出現多層巢狀的時候，如開啟模態框A，然後在A中開啟模態框B，在關閉B之後，如果A的內容比較多，滾動條會消失，而變為Body的滾動條，這是由於模態框自帶的遮罩的問題。網上有朋友給出的解決方案是在A增加overflow:auto的方法解決，但是這種方法會使得頁面出現兩個

設定bootstrap modal模態框的寬度和寬度

(1)修改寬度可以通過修改modal中的modal-dialog這個div寬度實現 <div class="modal-dialog" style="width:600px"> (2) 修改高度和寬度最好的辦法是修改modal-body中新增的控制元件，設定控制元件的

bootstrap中模態框的使用，實現酷炫的彈出效果，可以實現form表單，提示框等等

前言：這是我的第四篇垃圾博文，前三篇目前看來只有13次瀏覽量，我自己看的好像就佔了一大半，不過還是要不要臉的寫下去；正文：問題：我們作為後臺開發人員，經常會做一些表單提交，最常見的是對資料庫的的增刪改查，大部分同學做修改的增加的時候都會選擇重新跳轉到一個新的頁面，這樣既不簡潔

關於獲取bootstrap中模態框中表單資料

首先貼圖如下： 事件 描述 例項 show.bs.modal 在呼叫 show 方法後觸發。 $('#identifier').on('show.bs.modal', function

bootstrap的模態框modal的hidden.bs.modal屬性

這個問題是在春節大展活動上面遇到的問題，專案地址是：http://hd.tongji021.com/20170103/       在抽獎的時候遇到的坑，非常感謝。 hidden.bs.modal的

bootstrap-fileinput模態框匯入Excel完整示例

import java.io.FileInputStream; import java.io.IOException; import java.io.InputStream; import java.util.ArrayList; import java.util.List; import org.apac