L D

Youtube Thumbnail Generator

For when your character is scrolling through youtube. You can place multiple of these in a row to make it look like the youtube app homepage. Profile pictures are hidden when the workskin's disabled, and they don't have any alt text, so make sure your fic makes sense without that, or add alt text + unhide the pfps.

Editor

thumbnail gradient thumbnail image

Thumbnail URL:

Alt Text

Timestamp:

Title:

Info:

Profile Picture:

Or add your own PFP:

Toggle Disable Workskin

Length: 00:00

Youtube Video:
CRAZY TITLE GOES HERE
USERNAME · XX views · XX days ago

.youtube .for-no-ws {
    display: none;
  }
  .youtube {
    position: relative;
    max-width: 20rem;
    padding: 5px;
    margin: auto;
    font-family: sans-serif;
  }
  .youtube .thumbnail {
    position: relative;
    margin: 0px;
    padding: 0px;
  }
  .youtube .thumbnail img {
    display: block;
    background: linear-gradient(90deg, #b0b8e3 0%, #bcc9d9 100%);
    border-radius: 15px;
    padding: 0px;
    margin: 0px;
    width: 100%;
  }

.youtube p.no-img {
    background: linear-gradient(90deg, #b0b8e3 0%, #bcc9d9 100%);
    min-height: 180px;
    border-radius: 15px;
  }

.youtube p.no-img-2 {
    background: linear-gradient(90deg, #b0c9e3 0%, #bcd8d9 100%);
    min-height: 180px;
    border-radius: 15px;
  }

.youtube p.no-img-3 {
    background: linear-gradient(90deg, #bdb0e3 0%, #b0b8d9 100%);
    min-height: 180px;
    border-radius: 15px;
  }

.youtube p.no-img-4 {
    background: linear-gradient(90deg, #e6cdf9 0%, #c2bcd9 100%);
    min-height: 180px;
    border-radius: 15px;
  }

.youtube p {
    margin: 0px;
    padding: 0px;
  }
  .youtube .timestamp {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    background-color: black;
    padding: 2px 4px;
    border-radius: 5px;
    font-size: small;
    color: white;
    opacity: 75%;
  }

.youtube .info {
    text-align: left;
    display: grid;
    grid-template-columns: auto auto auto;
    margin: 10px 5px;
  }

.youtube .info::after {
    display: block;
    margin: 0px 5px;
    content: "⋮";
    right: 10px;
    font-weight: 1000;
    font-size: large;
  }
  .youtube .info img {
    display: block;
    height: 2rem;
    width: 2rem;
    margin: 0px 10px 0px 0px;
    border-radius: 100px;
  }

.youtube .title {
    display: inline-block;
    padding: 0 2px;
  }

.youtube .info small {
    font-size: 0.7rem;
  }