ビデオ - ブートストラップモードで全画面ボタンが表示されない

Question

この問題が発生しています。

まず、このプロジェクトでどのように作業しているのかを説明します。

私たちはデモページを持っていますが、もう一つはデモページの各要素を別々にモジュールといいました。これは、他のクライアントが「本当の」ページを構築している間に、より簡単に作業できるからです。

このように言えば、デモページに動画が含まれています。私たちのモジュールでは、ビデオには「フルスクリーン」ボタンがありますが、デモでは表示されません。
私たちのモジュールでは、ブートスラップから "偽の"モーダルを作成し、一度開いたモーダルをどのように見えるかをクライアントに示しています。しかし、これをデモページに組み込むと、このボタンは文字通り表示されません。私たちはブートストラップからのモーダルがそれを示すことを妨げているからだと思うが、わからない。ここではモジュールとデモの画像をいくつか残しています。

モジュール： は

デモ：

HTML：

<div class="modal-body"> 
    <div class="ver-video"> 
     <video controls > 
      <source src="video/video-finanzas.mp4" type="video/mp4"> 
      <source src="video/video-finanzas.ogv" type="video/ogv"> 
      <source src="video/video-finanzas.webm" type="video/webm"> 
      Tu navegador no soporta el video 
     </video> 
    </div> 
    <div class="container-fluid wrapper-content"> 
     <img src="img/icn-step2-incorrecto.png"> 
     <h4>Text</h4> 
     <h5>More text</h5> 
     <p>More text</p> 
     <a href="#" class="btn-onboarding" target="_top">Link</a> 
    </div> 
</div> 

CSS：私が言ったように

.modal-onboarding .ver-video { 
    background-image: url("../img/Step2_Resposta.png"); 
    background-position: center; 
    background-repeat: no-repeat; 
    width: 100%; 
    height: 220px; 
    position: relative; 
} 
.modal-onboarding .ver-video video{ 
    width: 100%; 
    height: 100%; 
} 

、我々は知らないなぜボタン消える。多分ブートストラップモーダルがそれを表示することを妨げるからでしょうか？それが解決策ですか？あるページから他のページへのコードは同じもので、コピー・ペーストです。

Answer 1

FirefoxとChromeでは、frameタグ内のHTML5動画タグが表示されているため、このボタンは表示されなくなります。私はちょうどframeの有無にかかわらずテストしました。