Greasy Fork

Bug due to overflow: visible;

After I found your script, I created a similar but different script (Youtube Player Controls below Video) to move the player controls down.

I found that there will be a problem when you set overflow: visible; in the #movie_player.

At the end video (example video), the video will pause and the video will be shifted (with animation) to the top of the page.

It is somehow a feature in YouTube design.

However, when overflow:visible is applied, the video left the container will be visible.

Solution

Here is the pure CSS solution and I hope you could add to your script as well.

    #movie_player .html5-video-container {
        position: absolute;
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
        overflow: hidden;
        contain: layout size paint style; /* if supported */
    }
    #movie_player .html5-video-container > video[style*="top: -"],
    #movie_player .html5-video-container > video[style*="top:-"] {
        margin-top: -1px !important; /* (.ended-mode#movie_player) video size 943 x 530.44, but top: -530px only */
    }

the video will pause and the video will be shifted (with animation) to the top of the page
It is somehow a feature in YouTube design.

Can you provide a video/gif how does this look? I don't see "the video will be shifted" effect.

Sure. I will do it later :)

https://streamable.com/6guji1

Thank you for the video. Well, this issue was there from the very beginning and you finally helped to nail it! The fix you proposed works, but I have something more simple:

#movie_player.ended-mode .html5-video-container {
    overflow: hidden;
}

Thank you for the video. Well, this issue was there from the very beginning and you finally helped to nail it! The fix you proposed works, but I have something more simple:

#movie_player.ended-mode .html5-video-container {
    overflow: hidden;
}

The reasons why not just overflow: hidden

1. class name ended-mode might be added slightly after position changing. (i.e. moved upwards few milliseconds then get suddenly hidden completely)
2. the animation feature will be disappear and the transition effect will be so sudden. ( the .html5-video-container is set as zero height, once the overflow:hidden, the overlay will be immediately disappear. )

Therefore, position: absolute; bottom: 0; top: 0; left: 0; right: 0; are also required.

(contain is just optional)

margin-top: -1px !important; might be not required if top: 1px; is used instead of top: 0;

anyway, not a big deal. up to you.