Lightbox lindão funcionando com problema só em vídeos HTML5

[M.S.S 0]

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.

 

[M.S.S 0]

Eu estou mexendo no script e consegui um resultado idêntico ao anterior com um script diferente.

 

O script funciona bem no Firefox e de modo parcial no Opera e Google Chrome e não funciona no Internet Explorer, Microsoft Edge (do Windows 10), e Safari.

CSS

<style type="text/css">
body, html {
	min-height:100%;
}
.mfp-title {
  position:absolute;
  /* other formatting */
}
</style>

HTML

<a class="popup-player-html5" href="video/Big_Buck_Bunny_1.mp4" data-mfp-src="video/Big_Buck_Bunny_1.webm" style="color:#FB0307;">Abrir vídeo em  HTML5</a>

Javascript

    <script type="text/javascript">
	$(document).ready(function() {
    $('.popup-player-html5').magnificPopup({
    type: 'iframe',
    mainClass: 'mfp-fade',
    removalDelay: 160,
    preloader: false,
    fixedContentPos: false,
    iframe: {
     markup: '<div class="mfp-iframe-scaler">'+
                '<div class="mfp-close"></div>'+
                '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
                '<div class="mfp-title">Some caption</div>'+
              '</div>'
  },
  callbacks: {
    markupParse: function(template, values, item) {
     values.title = item.el.attr('title');
    }
  },
  // your other settings
});
      });
</script>

Fonte de pesquisa onde achei o código acima: http://stackoverflow.com/questions/17612258/title-for-iframe-video-in-magnific-popup

Link da nova versão: http://www.maurian.com.br/lightbox3/index2.html