FlowPlayer is overlapping with the default HTML5 player on Firefox

Question

I am using the free version of FlowPlayer with the following HTML:

<div class="flowplayer">
    {% if videoPath %}
    <video width="695" height="391" controls>
        <source src="/uploads/{{ videoPath }}" type="video/mp4">
    </video>
    {% else %}
        <img src="{{ asset('img/sample/video-placeholder.png') }}" class="img-fluid"/>
    {% endif %}
</div>

and a piece of JS code in another file:

flowplayer.conf = {
    share: false,
    clip: {
        provider: 'rtmp',
        autoPlay: false,
        urlResolvers: 'brselect',
        // preserve aspect ratios
        scaling: 'fit',
        bitrates: [

            // use the 800 kbps item by default, the SD item, marked with sd: true
            { url: "mp4:bbb-800", bitrate: 800, sd: true, isDefault: true },

            // this is the HD item, marked with hd: true
            { url: "mp4:bbb-1600", bitrate: 1600, hd: true }
        ]
    },
};

It looks ok on Chrome but on Firefox the FlowPlayer layer overlapps with the default HTML5 player as shown in the picture below.

Firefox:

Chrome:

What can be done in this situation?

Answer 1

I removed the controls attribute from <video> and now it works as intended.