Video with Reflection in firefox

Question

I have the following structure that displays a video:

div {
  height: 460px;
  width: 100% background: -moz-linear-gradient(top, black 0%, #020223 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, #020223));
  /* Chrome, Safari4+ */
  background: -webkit-linear-gradient(top, black 0%, #020223 100%);
  /* Chrome10+, Safari5.1+ */
  background: -o-linear-gradient(top, black 0%, #020223 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, black 0%, #020223 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, black 0%, #020223 100%);
  /* W3C */
  -webkit-box-shadow: 0px 0px 13px 5px #DB1242;
  -moz-box-shadow: 0px 0px 13px 5px #DB1242;
  box-shadow: 0px 0px 13px 5px #DB1242;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}
video:before {
  background: -moz-linear-gradient(center top, #FFFFFF, #FFFFFF 30%, rgba(255, 255, 255, 0.9) 65%, rgba(255, 255, 255, 0.7)) repeat scroll 0 0 padding-box, -moz-element(video) no-repeat scroll 0 -127px content-box rgba(0, 0, 0, 0);
}
video {
  opacity: 0.6;
  margin-bottom: 120px;
  padding: 0 10px;
  position: relative;
  -webkit-box-reflect: below 0px -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.3) 0%, transparent 50%, transparent 100%);
}

<div>
  <video name="video" preload="preload" value="2" controls style="width:500px;">
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" />
  </video>
</div>

But in firefox does not create the reflection effect, the video element apparently does not support tag box-reflection? I’m using CSS found here

There is a way to create this video reflex effect in Firefox?

Answer 1

I managed to run my Firefox, see if it works there:

#div {
  height: 600px;
  width: 100% background: -moz-linear-gradient(top, black 0%, #020223 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, #020223));
  /* Chrome, Safari4+ */
  background: -webkit-linear-gradient(top, black 0%, #020223 100%);
  /* Chrome10+, Safari5.1+ */
  background: -o-linear-gradient(top, black 0%, #020223 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, black 0%, #020223 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, black 0%, #020223 100%);
  /* W3C */
  -webkit-box-shadow: 0px 0px 13px 5px #DB1242;
  -moz-box-shadow: 0px 0px 13px 5px #DB1242;
  box-shadow: 0px 0px 13px 5px #DB1242;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}
video {
opacity: 0.6;
margin-bottom: 5px;
padding: 0 10px;
position: relative;
-webkit-box-reflect: below 0px -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.3) 0%, transparent 50%, transparent 100%);
}
#video::after {
  background: rgba(0, 0, 0, 0) -moz-element(#video) repeat scroll 0 0;
}
.reflect::after {
  bottom: -100%;
  content: "";
  left: 0;
  mask: url("mask.svg#mask");
  opacity: 0.4;
  position: absolute;
  right: 0;
  top: 100%;
  transform: translateY(10px) scaleY(-1);
  z-index: 0;
}
.reflect {
  position: relative;
}

<div id="div">
  <div id="video" class="reflect">
    <video name="video" preload="preload" value="2" controls style="width:500px;">
      <source src="http://www.w3schools.com/html/mov_bbb.mp4" />
    </video>
  </div>
</div>