javascript - Adding a fullscreen button to native video players on a lightbox plug-in -


i've been trying solve small issue weeks no luck.

i'm have experience html & css novice in js.

i'm designing website thesis project includes responsive lightbox videos.

the issue in browsers video not display fullscreen button. on safari not on chrome or firefox.

i've tried adding combinations of allowfullscreen link tag doesn't work. think might have video thinking in fullscreen mode within lightbox? ..but i'm not sure..

the plug-in i'm using lightboxes poptrox.

i'm unsure code link useful here go :) (website www.kaleidoscope-ep.ie if helps )

html:

<div class="gallery">                      <div id="playbutton" >                         <a href="video/video.mp4" data- poptrox="iframe,1920x1080" controls  title="play video"  frameborder="0" allowfullscreen="true" webkitallowfullscreen="true"  zallowfullscreen="false" class="play"  alt="play video"  ></a>                     </div>                   </div> 

css:

/* gallery */  .gallery {     display: -moz-flex;     display: -webkit-flex;     display: -ms-flex;     display: flex;     -moz-flex-wrap: wrap;     -webkit-flex-wrap: wrap;     -ms-flex-wrap: wrap;     flex-wrap: wrap;     width: 45em;     max-width: 100%;     margin: 0 auto 0 auto; }      .gallery article {         -moz-transition: -moz-transform 1s ease, opacity 1s ease;         -webkit-transition: -webkit-transform 1s ease, opacity 1s ease;         -ms-transition: -ms-transform 1s ease, opacity 1s ease;         transition: transform 1s ease, opacity 1s ease;         -moz-transform: translatex(0);         -webkit-transform: translatex(0);         -ms-transform: translatex(0);         transform: translatex(0);         width: 50%;         position: relative;         opacity: 1.0;     }          .gallery article .image {             margin: 0;             display: block;         } 

js:

default:if(t.object=e('<img src="" alt="" style="vertical-align:bottom" />'), 

i found line of js seems relate iframe video in. tried adding allowfulscreen="1" in there did nothing.

any on appreciated i've been tearing hair out!

thank you!


Comments

Popular posts from this blog

Is there a better way to structure post methods in Class Based Views -

performance - Why is XCHG reg, reg a 3 micro-op instruction on modern Intel architectures? -

jquery - Responsive Navbar with Sub Navbar -