☰

Redgifs full height video

use css to set full height video

// ==UserScript==
// @name            	Redgifs full height video
// @namespace       	https://greasyfork.org/users/821661
// @match           	https://www.redgifs.com/watch/*
// @grant           	none
// @version         	1.2
// @author          	hdyzen
// @description     	use css to set full height video
// @license         	MIT
// @run-at              document-start
// ==/UserScript==
'use strict';

function addCSS(text) {
    document.documentElement.insertAdjacentHTML('beforeend', `<style rel='stylesheet'>${text}</style>`);
}

addCSS(`
html {
    overflow: hidden;
  }
.previewFeed:has(.GifPreview) {
    position: fixed;
    margin: 0;
    inset: 0;
    max-width: unset;
    scroll-snap-type: both mandatory;

    & > :not(.GifPreview) {
        display: none;
    }

    & > .GifPreview {
        height: 100vh;
        max-height: unset;
        width: 100%;
        min-width: 100%;
        margin: 0;
        position: relative;
        scroll-snap-align: center;

        & .Player-ProgressBar {
            bottom: 0;
            transform: translateY(-18px);
        }

        & .GifPreview-SideBarWrap {
            right: 10px;
        }

        & video {
            z-index: 9;
        }
    }
}

.App:has(.GifPreview) :is(.topNav, .ApplicationFooter) {
    display: none;
}
`);