beeg.com - see bug description

[webcompat-bot]

URL: http://beeg.com

Browser / Version: Firefox 59.0 Operating System: Linux Tested Another Browser: Yes

Problem type: Something else Description: Video playback controls are missing in fullscreen mode Steps to Reproduce:

1. start any video
2. go fullscreen
3. see no controls at bottom

From webcompat.com with ❤️

[karlcow]

Confirmed.

.player .controls {
    z-index: 2147483647;
}
.player .controls {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 54px;
    font: 400 13px/54px 'Roboto','Roboto Condensed','Helvetica Neue',Helvetica,Arial,sans-serif;
    color: #fff;
    text-align: center;
    background-color: transparent;
    text-shadow: 0 0 2px rgba(0,0,0,.5);
}
.player.fullscreen-on .controls {
    position: fixed;
}

I will check later.

[karlcow]

ok found a video with a non-suggestive image. on my screen

• The main #player element is `1680px x 0px
• then #html5player is width: 1016px; height: 571.5px;
• The video element is 1680 x 1050
• The controls at the bottom have a 54px height but not visible.

<div id="player"
    style="height: 0px;">
    <div id="html5player"
        class="player fullscreen-on"
        style="display: block; top: 798px; left: 177px; width: 1016px; height: 571.5px;">
        <div class="video-wrapper">
            <video class="video"
                preload="auto"
                autoplay=""
                src="https://video.beeg.com/data=pc_JP_210.194.53.71_2509_qIsZ4pDt/key=Q1uZ6vDJvgf6OhSKahBfBQ%2Cend=1516605646/480p/9626807.mp4"></video>
        </div>
        <div class="advert"
            style="display: none;">
            <div class="inplayer"
                id="inplayerbox"
                onclick="$('#html5player .advert').hide(0);">
                <div class="wrp">
                    <a class="close"
                        href="#"
                        onclick="javascript:$('#html5player .advert').hide(0);return false;"></a>
                    <div class="spor i1">
                        <iframe scrolling="no"
                            marginheight="0"
                            marginwidth="0"
                            src="…"

                            width="300"
                            height="250"
                            frameborder="0"></iframe>
                    </div>
                    <div class="spor i2">
                        <iframe scrolling="no"
                            marginheight="0"
                            marginwidth="0"
                            src="…"

                            width="300"
                            height="250"
                            frameborder="0"></iframe>
                    </div>
                </div>
            </div>
        </div>
        <div class="active-bg"
            tabindex="0">
            <div class="buffering"
                style="display: none;"></div>
        </div>
        <div class="controls glassy clearfix">
            <div class="gradient"></div>
            <div class="play-btn"></div>
            <div class="volume-btn">
                <div class="mute"></div>
                <div class="level">
                    <div class="track"></div>
                    <div class="current"
                        style="width: 100%;"></div>
                    <div class="slider"></div>
                </div>
            </div>
            <div class="duration">19:32</div>
            <div class="progress">
                <div class="played"
                    style="width: 9.3919%;"></div>
                <div class="slider"></div>
                <div class="buffered"
                    style="width: 10.2768%;"></div>
            </div>
            <div class="preview"
                style="width: 244px; height: 139px; left: 499.933px;">
                <img src="//img.beeg.com/preview/96/9626807.jpg"
                    style="width: 4800px; height: 1755px; margin-top: -1620px; margin-left: -1440px;">
            </div>
            <div class="fullscreen-btn"></div>
            <div class="theater-btn"></div>
            <div class="insider-btn"></div>
            <div class="quality-btn">480p</div>
            <div class="qualities">
                <div class="quality disabled">1080p</div>
                <div class="quality">720p</div>
                <div class="quality">480p</div>
                <div class="quality">240p</div>
            </div>
        </div>
    </div>
</div>

[karlcow]

For example the play button box is at the right position.

.player .controls .play-btn {
    float: left;
    width: 54px;
    height: 54px;
    cursor: pointer;
    background: url('/static/img/elements/video-sprite.png') 0 -54px no-repeat;
    opacity: 0;
}

still haven't found how to show the controls. Even by removing a lot of stuff. It stays hidden.

[mthw0]

Currently works correctly, so this issue can be closed.