thered.stream - wrong size video thumbnails

[back2themoon]

I've seen this elsewhere too, i.e. I think this is happening more frequently lately. Video functionality is there, but the preview thumbnail size is off.

https://thered.stream/how-trump-may-esc ... estinians/

Scroll a bit down, and you will see this incorrectly sized thumbnail:

Preview1.png

https://thered.stream/echoes-of-empire- ... -in-kenya/

Right at the top, you will see this incorrectly sized thumbnail:

Preview2.png

Error Console:

EC.png

[back2themoon]

Also:

EC2.png

[adoxa]

It's the missing aspect-ratio again; try this userstyle.

Code: Select all

@-moz-document domain("thered.stream") {
  .media-container iframe {
    height: 720px
  }
}

[back2themoon]

Thank you, adoxa. I think it fixes the second example, but not the first one.

[adoxa]

Oops. Here's another version that fixes both and is a bit more flexible.

Code: Select all

@-moz-document domain("thered.stream") {
  .container iframe {
    height: calc(var(--content-width) * 9 / 16)
  }
  .single56__content iframe {
    height: calc(var(--narrow-width) * 9 / 16)
  }
}

[back2themoon]

Thanks again. You fixes must make for excellent learning material! Hope to be able to "decode" them soon - I am trying.

This aspect-ratio thing is probably time-consuming to implement natively, I guess.

[back2themoon]

It's the missing aspect-ratio again;

Can't say for sure, but this seems like a very similar issue. If it's not, I'll open another topic. (scroll just a bit down, first YouTube video embed)

https://www.pcsteps.gr/425724-%cf%84%ce ... art-world/

Narrow Mario.png

Tried both your styles in this topic, but they don't apply in this case (I've changed the URLs where necessary).

[adoxa]

It's still aspect-ratio, but the width is applied differently.

Code: Select all

@-moz-document domain("www.pcsteps.gr") {
  @media (min-width:576px) {
    .container iframe {
      height: calc((540px * 2 / 3 - 30px) * 9 / 16) !important;
    }
  }
  @media (min-width:768px) {
    .container iframe {
      height: calc((720px * 2 / 3 - 30px) * 9 / 16) !important;
    }
  }
  @media (min-width:992px) {
    .container iframe {
      height: calc((960px * 2 / 3 - 30px) * 9 / 16) !important;
    }
  }
  @media (min-width:1200px) {
    .container iframe {
      height: calc((1140px * 2 / 3 - 30px) * 9 / 16) !important;
    }
  }
}

What all that means:

1140px - original width;
2/3 - iframe is 66%;
30px - 15px margin left & right;
9/16 - 16:9 aspect ratio.

[back2themoon]

Many thanks again, for the extra info too. Some day I'll make sense out of all this.