javascript - Fullscreen HTML API to work in Firefox -

i trying force video go full screen (native) when specific button clicked on. using fullscreen html api this, , in opera/chrome works supposed to. in firefox not. whenever click button , call js forces browser go fullscreen (just when press f11 on keyboard). have following code:

video:

html:

<video id="videotrailer" controls src="i removed video link here"></video> 

css:

#videotrailer{ display: none; } 

im placing video anywhere in html doc , hide it.

button:

    <div id="trailerbutton" class="btn col-3" onclick="showtrailer()">my trailer text     </div> 

css:

.col-4 {width: 33.33%;}  #trailerbutton{ margin-left: auto; margin-right: auto; margin-bottom: 0; position: absolute; left:0; right:0; border: 2px solid yellow; border-bottom: none; bottom:0; border-top-right-radius:1em; border-bottom-right-radius: 0; padding-bottom: 0.3em; padding-top: 0.3em; padding-right: 0em; padding-left: 0em; }  #trailerbutton:hover{     color:yellow;     cursor: pointer; } 

javascript:

var pausetrailer = function () { 'use strict'; var elem = document.getelementbyid("videotrailer"); elem.pause(); };  var showtrailer = function () {     'use strict';     var elem = document.getelementbyid("videotrailer");     if (elem.requestfullscreen) {         elem.requestfullscreen();     } else if (elem.mozrequestfullscreen) {         elem.mozrequestfullscreen();     } else if (elem.webkitrequestfullscreen) {         elem.webkitrequestfullscreen();     } document.addeventlistener("fullscreenchange", pausetrailer); document.addeventlistener("webkitfullscreenchange", pausetrailer); document.addeventlistener("mozfullscreenchange", pausetrailer); document.addeventlistener("msfullscreenchange", pausetrailer); }; 

so looking pure javascript solution makes video go fullscreen (native) in firefox (im not allowed use jquery this) point out though javascript knowledge limited. in advance.