2017-01-31 5 views
0

이 문제가 발생했습니다.비디오 - 부트 스트랩 모달이 전체 화면 버튼을 표시하지 않음

나는이 프로젝트에서 우리가 어떻게 작업하고 있는지 가장 많이 설명하려고 노력할 것입니다.

우리는 데모 페이지를 가지고 있으며 또 다른 데모 페이지에는 모듈이라고하는 데모 페이지의 각 요소가 별도로 있습니다. 이는 다른 클라이언트가 "실제"페이지를 작성하는 동안보다 쉽게 ​​작업 할 수 있기 때문입니다.

이렇게 말한 후에는 데모 페이지에 비디오를 포함 시켰습니다. 우리 모듈에서는 동영상에 "전체 화면"버튼이 있지만 데모에서는 보이지 않습니다.
우리 모듈에서는 bootsrap에서 "가짜"모달을 만들었습니다. 일단 클라이언트가 일단 모달을 어떻게보아야하는지 보여주기 위해 말입니다. 그러나 일단 우리의 데모 페이지에 포함 시키면이 버튼은 문자 그대로 나타나지 않습니다. 부트 스트랩의 모달이 그것을 보여주지 못하기 때문에 가능하다고 생각하지만 확실하지는 않습니다. 여기서 모듈과 데모의 일부 이미지를 남깁니다.

모듈 : 이 Modules

데모 : Demo

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%; 
} 

, 우리가 모르는 이유 버튼 사라집니다. 아마 부트 스트랩 모달이 그것을 보여주는 것을 막기 때문일까? 그게 해결책이라면? 한 페이지에서 다른 페이지로의 코드는 동일한 것으로 복사 - 붙여 넣기입니다.

+0

개발자 도구를 사용하여로드되지 않았는지 검사하고 확인할 수 있습니까? – sol

+0

@ovokuro 비디오가 정상적으로 재생됩니다. 전체 화면의 버튼으로 표시되지 않으며 콘솔/네트워킹에 오류가 표시되지 않습니다. – Cheshire

+0

그러나 버튼이 표시되어야하는 부분을 검사하면 문제가 발생합니까? 스타일이 오버 라이드 된 것처럼? – sol

답변

0

Firefox와 Chrome에서 frame 태그 안에있는 HTML5 동영상 태그가 보이면이 버튼이 사라집니다. 방금 테스트했는데 frame이 없거나 없는데 그게 정확히 발생했습니다.