Lightbox lindão funcionando com problema só em vídeos HTML5
>
Bom dia,
Alguém pode me ajudar a fazer o lightbox do site Magnific-Popup abrir vídeo HTML5 (.mp4, .m4v, .webm e .ogv)?
Eu baixei esse lightbox lindão que funciona muito bem com imagens, mapas e vídeos do Youtube e da Vimeo.
No entanto estou tendo problemas para fazer esse ightbox rodar vídeos em HTML5 (.mp4, .m4v, .webm e .ogv).
Link para o site original do Lightbox: http://dimsemenov.com/plugins/magnific-popup/
Eu cheguei a fazer alguns testes e percebi que o lightbox com o código abaixo funciona bem no Firefox e de modo parcial no Opera e Google Chrome.
No Internet Explorer, Microsoft Edge (do Windows 10), e Safari o lightbox não funciona.Ele não funciona também no Iphone e no Ipad.
Segue um pequeno ajuste que eu tive que fazer por ter diminuído a tamanho da página.
<style type="text/css">
body, html {
min-height:100%;
}
</style>
Segue o código que eu consegui fazer funcionar no bem no Firefox e de modo parcial no Opera e Google Chrome.
<a class="popup-vimeo" href="video/Big_Buck_Bunny_1.mp4" data-mfp-src="video/images/Big_Buck_Bunny_1.webm" style="color:#FB0307;">Vídeo HTML5</a>
Segue o script que fica dentro do HTML da página em que o lightbox está inserido com uma pequena correção para que ele não abra mapas do Google Maps e videos do Youtube, Vimeo e HTML5 em outra página quando a resolução da tela for pequena (eu comentei a função "disableOn: 700," para desabilita-lá). Com esse ajuste o lightbox abre em celulares com Android.
<script type="text/javascript">
$(document).ready(function() {
$('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
//disableOn: 700,
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
fixedContentPos: false
});
});
</script>
Se alguém puder me ajudar, ficarei grato.
Discussão (1)
Carregando comentários...