2017-01-31 3 views
0

Перед нами стоит эта проблема.Видео - Bootstrap modal, не показывающий полноэкранную кнопку

Я попытаюсь объяснить, насколько я могу, как мы работаем в этом проекте в первую очередь.

У нас есть демонстрационная страница, а у нас есть каждый элемент демонстрационной страницы отдельно, называемый модулями. Это связано с тем, что другие клиенты могут работать более легко, создавая «настоящую» страницу.

Как только мы сказали это, мы включили видео на нашу демонстрационную страницу. В наших модулях видео имеет кнопку «полноэкранный режим», но не в нашей демонстрации.
Мы должны сказать, что в наших модулях мы создаем «поддельный» модальный от 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%; 
} 

Как я уже говорил, мы не знаем, почему кнопка исчезает. Может быть, потому что bootstrap modal предотвращает его показ? Если это так, то это решение? Код с одной страницы на другую один и тот же, copy-paste.

+0

Можете ли вы использовать инструменты разработчика для проверки и проверки, не загружается ли она? – sol

+0

@ovokuro видео воспроизводится отлично, это просто кнопка с полноэкранного экрана, которая не появляется, а консоль/сеть не отображает никаких ошибок. – Cheshire

+0

Но если вы проверите, где должна отображаться кнопка, вы можете увидеть какие-либо проблемы? Как стиль переоценивается? – sol

ответ

0

Для того, что я вижу, в Firefox и Chrome, тег HTML5 внутри тега frame, эта кнопка исчезнет. Я просто проверил его с frame и без него, и это именно так.

Смежные вопросы