Skip to content

Invidious (All Instances) Player And Tabs v.3 by decembre

Screenshot of Invidious (All Instances) Player And Tabs v.3

Details

Authordecembre

LicenseNo License

CategoryInvidious, YouTube fork, Tabs, yewtu.be

Created

Updated

Size29 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Player stay fixed at the LEFT side.

  • Title moved TOP of player
  • Videos Related / Info, Description / Comments on the RIGHT side ( visible on hover their own tabs)
    So, you can watch the video AND read info / Comments, choose next video without problem.
  • Related Videos panel highlight on hover
  • Top Nav compact
  • Footer and Settings / info for the video / Message of the Instance,, visible on hover
  • Support Dark and Light theme
  • Support for all Instances - invidious API documentation repository
    See too:
    Invidious - Select Instances

Notes

About Invidious (in French):
Invidious : Regarder des vidéos Youtube sans les pubs !

And its official site:
Invidious Invidious is an open source alternative front-end to YouTube.

Changes v.3:

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name        Invidious (All Instances) Player And Tabs v.3
@namespace   https://yewtu.be/
@version     03.0.0
@author      decembre
@description Invidious (yewtu.be) player with Tabs for Description / Comments / Videos Related
@license     unlicense
==/UserStyle== */

@-moz-document url-prefix("https://yewtu.be/watch?"), url-prefix("https://vid.puffyan.us/watch?"), url-prefix("https://invidious.snopyta.org/watch?"), url-prefix("https://inv.riverside.rocks/watch?"), url-prefix("https://invidio.xamh.de/watch?"),url-prefix("https://y.com.sb/watch?"), url-prefix("https://invidious.sethforprivacy.com/watch?"), url-prefix("https://yt.artemislena.eu/watch?"), url-prefix("https://invidious.tiekoetter/watch?"), url-prefix("https://invidious.flokinet.to/watch?"), url-prefix("https://inv.bp.projectsegfau.lt/watch?"), url-prefix("https://yewtu.be/watch?"), url-prefix("https://inv.vern.cc/watch?"), url-prefix("https://yewtu.be/watch?"), url-prefix("https://yewtu.be/watch?"), url-prefix("https://invidious.nerdvpn.de/watch?"), url-prefix("https://invidious.projectsegfau.lt/watch?"), url-prefix("https://invidious.rhyshl.live/watch?"), url-prefix("https://yewtu.be/watch?"), url-prefix("https://inv.privacy.com.de/watch?"), url-prefix("https://invidious.slipfox.xyz/watch?"), url-prefix("https://youtube.076.ne.jp/watch?"), url-prefix("https://invidious.esmailelbob.xyz/watch?"), url-prefix("https://invidious.namazso.eu/watch?"), url-prefix("https://invidious.kavin.rocks/watch?"), url-prefix("https://yt.funami.tech/watch?"), url-prefix("https://invidious.0011.lt/watch?"), url-prefix("https://watch.thekitty.zone/watch?"), url-prefix("https://iv.melmac.space/watch?"), url-prefix("https://iv.ggtyler.dev/watch?"), url-prefix("https://invidious.tiekoetter.com/watch?"), url-prefix("https://invidious.vpsburti.com/watch?"), url-prefix("https://inv.odyssey346.dev/watch?"), url-prefix("https://invidious.lunar.icu/watch?"), url-prefix("https://invidious.baczek.me/watch?"), url-prefix("https://inv.zzls.xyz/watch?"), url-prefix("https://vid.priv.au/watch?"), url-prefix("https://invidious.privacydev.net/watch?") {

/* ====   Invidious (All Instances) Player And Tabs v.3  ==== */

/* WIDESREEN */


/* TOP NAV */
.pure-g.navbar.h-box .pure-u-1.pure-u-md-4-24 {
    max-width: 5.6667% !important;
    margin-top: -19px !important;
}
.pure-u-1.pure-u-md-12-24.searchbar{
    margin-top: -19px !important;
}
.pure-u-1.pure-u-md-8-24.user-field{
    margin-top: -20px !important;
}

.pure-u-md-20-24, 
.pure-u-md-5-6 {
    width: 83.3333%;
}


#contents {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100% !important;
}
/* (new3) TOP NAV - CONTACT/INFOS MESSAGES */
.pure-g.navbar.h-box + .h-box {
    position: fixed !important;
    display: inline-block !important;
    max-width: 40vw !important;
    left: 8vw !important;
    bottom: -6.5vh !important;
    padding: 0  !important;
    font-size: 15px  !important;
border: 1px solid aqua  !important;
}
.pure-g.navbar.h-box + .h-box:hover {
    position: fixed !important;
    display: inline-block !important;
    max-width: 40vw !important;
    left: 5.4vw !important;
    bottom: 0 !important;
    padding: 5px 20px 5px 15px!important;
    border-radius: 5px  5px 0 0 !important;
    font-size: 15px  !important;
    z-index: 500000 !important;
background: #111 !important;
border: 1px solid red  !important;
}

.pure-g.navbar.h-box + .h-box:not(:hover)::before {
    position: fixed !important;
    display: inline-block;
    content: "⚠";
    width: 20px;
    height: 15px;
    line-height: 15px;
    bottom: 0vh !important;
    left: 5.5vw;
    border-radius: 5px 5px 0 0;
    text-align: center;
    font-size: 15px;
    z-index: 500;
color: gold !important;
background-color: rgb(21, 21, 21);
border: 1px solid red;
}
.pure-g.navbar.h-box + .h-box h3{
    display: inline-block !important;
    margin: 0 !important;
    padding: 0  !important;
    font-size: 15px !important;
    font-weight: normal !important;
    font-family: Arial, sans-serif !important;
color: gray !important;
/* border: 1px solid aqua  !important; */
}

/* (new3) TOP NAV FEED MENU:
FOR: https://watch.thekitty.zone/
==== */
.feed-menu {
    position: fixed !important;
    display: inline-block !important;
    right: 16vw !important;
    top: 0.5vh !important;
    padding: 0  !important;
    font-size: 15px  !important;
border-bottom: 1px solid red  !important;
}
.feed-menu-item {
    float: left !important;
    padding: 0 0.5rem !important;
    text-align: center;
}
/* VID PLAYER */
.player-dimensions.vjs-fluid {
    padding-top: 82vh;
}
.vjs-poster {
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    margin: 0;
    padding: 0;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain !important;
    object-fit: contain !important;
/* background-color: #000000; */
}

#player-container.h-box {
    position: relative;
    width: 55% !important;
    height: 0 !important;
    top: 8vh !important;
    margin: 0 1em 0 1em;
    padding: 0 0 82vh 0 !important;
/* border: 1px solid red !important; */
}
/* (new3) */
/* #player-container.h-box #player.on-video_player.video-js.player-style-invidious {
    width: 100%;
    padding-top: 590px !important;
} */


/* TITLE */
#player-container.h-box + .h-box {
    position: absolute !important;
    display: inline-block !important;
    width: 53.35% !important;
    min-height: 8.1vh !important;
    top: 5.5vh !important;
    margin: 0 1em 0 1em !important;
    padding: 0 1em 0 1em !important;
/* border: 1px solid green !important; */
}
#player-container.h-box + .h-box h1  {
    font-size: 1.5em !important;
    margin: 0.27em 0 0 0 !important;
}


/* INFOS + COMMENTS */

.h-box + .pure-g {
    position: absolute !important;
    display: flex;
    float: right !important;
    clear: both !important;
    width: 42% !important;
    top: 5.8vh !important;
    right: 0 !important;
    margin: 0 1em 0 1em;
    padding: 1em 0 0 0 !important;
    -moz-box-direction: normal;
    -moz-box-orient: horizontal;
    align-content: flex-start;
    flex-flow: row wrap;
    font-family: FreeSans,Arimo,"Droid Sans",Helvetica,Arial,sans-serif;
    letter-spacing: -0.31em;
    text-rendering: optimizespeed;
border-top: 1px solid red !important;
}
.h-box + .pure-g > div {
    height: 90vh !important;
    overflow: hidden !important;
}
.pure-u-lg-3-5 {
    width: 60%;
}
.pure-u-lg-3-5 .h-box {
    padding-left: 1em;
    padding-right: 1em;
}
.pure-u-lg-3-5 .h-box > a ,
.pure-u-lg-3-5 .h-box > p ,
.pure-u-lg-3-5 .h-box > #description-box ,
.pure-u-lg-3-5 .h-box > hr {
    display: block;
    width: 100%;
}

/* TAB - DESCRIPTION TAB */
/* .pure-u-lg-3-5 .h-box > #description-box , */
.h-box + .pure-g .pure-u-1.pure-u-lg-1-5:first-of-type + .pure-u-1 {
    position: absolute !important;
    width: 98% !important;
    height: 92vh !important;
    top: 0 !important;
    padding: 0.4em 1em 0 1em !important;
    overflow-wrap: break-word;
    overflow: hidden !important;
    overflow-y: auto !important;
    visibility: hidden !important;
/* background: aqua !important; */
}
.h-box + .pure-g .pure-u-1.pure-u-lg-1-5:first-of-type + .pure-u-1:hover  {
    z-index: 500 !important;
    visibility: visible !important;
/* background: #111 !important; */
}
.pure-u-lg-3-5 .h-box > #description-box#description-box:before  {
    content: "Description" !important;
    position: fixed !important;
    max-width: 57% !important;
    top: 3.5vh !important;
    right: 35vw !important;
    padding: 0.1em 1em 0 1em !important;
    border-radius: 5px 5px 0 0 !important;
    visibility: visible !important;
/* background: aqua !important; */
}


/* TAB - COMMENTS TABS */
.pure-u-lg-3-5 .h-box > #comments  {
    position: absolute !important;
    width: 100% !important;
    height: 92vh !important;
    top: 0 !important;
    overflow-wrap: break-word;
    overflow: hidden !important;
    overflow-y: auto !important;
    visibility: hidden !important;
/* background: red !important; */
}
.pure-u-lg-3-5 .h-box > #comments:hover  {
    visibility: visible !important;
    z-index: 100 !important;
/* background: red !important; */
}
.pure-u-lg-3-5 .h-box > #comments:before  {
    content: "Comments" !important;
    position: fixed !important;
    max-width: 57% !important;
    top: 3.5vh !important;
    right: 25vw !important;
    padding: 0.1em 1em 0 1em !important;
    border-radius: 5px 5px 0 0 !important;
    visibility: visible !important;
/* background: red !important; */
}

/* TAB - RELATED VIDEO */
.h-box + .pure-g .pure-u-1.pure-u-lg-1-5:last-of-type  {
    position: absolute !important;
    width: 100% !important;
    height: 92vh !important;
    top: 0 !important;
    overflow-wrap: break-word;
    overflow: hidden !important;
    overflow-y: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
/* visibility: hidden !important; */
/* background: #333 !important; */
}

.h-box + .pure-g .pure-u-1.pure-u-lg-1-5:last-of-type:hover  {
opacity: 1 !important;
visibility: visible !important;
/* background: green !important; */
}
.h-box + .pure-g .pure-u-1.pure-u-lg-1-5:last-of-type:before  {
    content: "Videos" !important;
    position: fixed !important;
    max-width: 57% !important;
    top: 3.5vh !important;
    right: 16vw !important;
    padding: 0.1em 1em 0 1em !important;
    border-radius: 5px 5px 0 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
/* background: green !important; */
}


.h-box + .pure-g .pure-u-1.pure-u-lg-...

Reviews

No reviews yet.