As was foretold, we've added advertisements to the forums! If you have questions, or if you encounter any bugs, please visit this thread: https://forums.penny-arcade.com/discussion/240191/forum-advertisement-faq-and-reports-thread/

Desktop Youtube embeds are... weird?

AthenorAthenor Battle Hardened OptimistThe Skies of HiigaraRegistered User regular
I'm not entirely sure how to describe this.

Today, something happened where I was forcibly logged out of all of my devices and had to sign back in. After that, Youtube on the desktop got.. kind of weird.

Three main things stand out:

1. Now, when a youtube video embeds, the URL is visible after it (Where before it would be removed). It's on the same line, so this causes some oddities with word wrapping.

2. When you click the preview of the video and load it, it then loads much larger and takes up the whole width of the screen. I think the proportions are still the same.

3. While just now going for screenshots, I noticed that the preview has the youtube "Play" button centered according to where the video will actually be, and the center of the page, as opposed to the frame.

Example pictures, using a post I made on the 28th.

This is my entire Firefox window, scaled up for 140% due to how I tend to view content on my laptop, and then processed through imgur's huge thumbnail link:

7DULm8Nh.png

Same shot, same showing of width, but scaled back at 100%:

8Q87GG6h.png

Pressing play, at 100% -- you can see the difference in size compared to the above Joel video post:

JSVhMxwh.png

... I was going to show it after pressing play at 140% to match the original screenshot, bit Firefox isn't letting me set that resolution now for some reason. However, in the process I did notice that at 150%, horizontal scroll bars appear, implying that the auto-scaling is not working right with the embeds either.

I don't think it is a huge deal in the grand scheme of things, and people might prefer the videos showing larger. But it feels like another case of something changing on the backend, and therefore breaking our stylesheet.

He/Him | "A boat is always safest in the harbor, but that’s not why we build boats." | "If you run, you gain one. If you move forward, you gain two." - Suletta Mercury, G-Witch
BrainleechAldoSnicketysnickBroloZilla360RingoIanatordjmitchellaSkeithZonugalBahamutZEROShadowfireTofystedethCormacForarDisruptedCapitalistQuantum TigerJazzCommander ZoomFiendishrabbitkimeT-bolt

Posts

  • miscellaneousinsanitymiscellaneousinsanity grass grows, birds fly, sun shines, and brother, i hurt peopleRegistered User regular
    same here on chrome

    uc3ufTB.png
    ReynoldsPeewiSkeithZonugalElvenshaeCormacDonnictonForarCommander ZoomMichaelLCspool32
  • ShadowfireShadowfire Vermont, in the middle of nowhereRegistered User regular
    This fun has now spread to mobile. Firefox 110.1.0.

    x6e2vkmpcb74.png

    WiiU: Windrunner ; Guild Wars 2: Shadowfire.3940 ; PSN: Bradcopter
    ReynoldsmiscellaneousinsanityBroloDisruptedCapitalistQuantum TigerElaroJazzZilla360TofystedethSoggybiscuitIanatorkime
  • miscellaneousinsanitymiscellaneousinsanity grass grows, birds fly, sun shines, and brother, i hurt peopleRegistered User regular
    some image and gif uploads are also showing up postage stamp sized on mobile too

    uc3ufTB.png
    Kane Red RobeBahamutZEROQuantum TigerElaroDrovekJazz
  • BroloBrolo Broseidon Lord of the BroceanRegistered User regular
    26u9kjay2e2k.png
    t9fa0c8yzzs7.png


    so it looks like we're using a CDN to apply a fit=scale-down and then applying that to a srcset, which is a way of serving multiple sizes of an image:

    https://us.v-cdn.net/cdn-cgi/image/fit=scale-down,width=300/https://i.imgur.com/e6CG4C8l.png 300w
    https://us.v-cdn.net/cdn-cgi/image/fit=scale-down,width=800/https://i.imgur.com/e6CG4C8l.png 800w

    for various sizes all the way up to native res

    but for some reason the browser hinting is showing that we should be using the 1200w version of this image on mobile:

    https://us.v-cdn.net/cdn-cgi/image/fit=scale-down,width=800/https://i.imgur.com/e6CG4C8l.png 1200w,

    but instead we're getting an image rendered out at size that doesn't match any of the srcset sizes instead:

    Rendered Size: 208x136

    dropping the srcset tag altogether makes the images legible again, although doesn't fix the actual bug with the browser calculating an incorrect size

    DisruptedCapitalistShadowfireArbitraryDescriptorAldoZilla360AustinP0027
  • ArbitraryDescriptorArbitraryDescriptor changed Registered User regular
    edited April 2023
    Testing a suspicion

    9hfhq7y5nxvz.png
    Native: 72x105

    k42cy84ujdwa.png
    Native: 720x1050

    ----

    Suspicion confirmed: mobile website development is a hellscape I want no part of.

    The little one renders ~30% larger than native size in landscape (fit:1600), ~30% smaller in portrait (fit:1200), and 162% larger when opened in a new tab; but at a consistent size regardless of orientation.

    Is the css enforcing some additional fit constraint that's orientation dependent (and inverted)?

    Hellscape Edit: Second Ring

    Just discovered my phone has variable resolution:

    q3y8lv1i8umd.jpg

    And was set to a middle value of 2400x1080. Native, I assume, is the big one: 3200x1440

    When I change to the mid or smaller, then come back to the page, the image is larger in portrait. When I rotate to landscape and back: it gets smaller.

    jt1eomnxwwyv.jpg

    rjb012voiltc.jpg

    When I set it to native res, the portrait version stays the same size. In relative terms, this is the smaller size the others revert to after reorientation ("Nat"), but the larger version they start at matches the landscape version ("Nativ").

    Landscape version stays a consistent size regardless.

    Given that the CDN url seems to be based off of native res regardless of the current display setting, that may be part of the issue, but the portrait rendering is definitely fucky all on its own. Mobile Chrome seems to natively want to upscale up images to make them legible on its tiny, high density screen, and it seems like maybe something in the forum css is preventing that?

    ArbitraryDescriptor on
    BroloForarShadowfireZilla360
  • ArbitraryDescriptorArbitraryDescriptor changed Registered User regular
    edited April 2023
    Brolo wrote: »

    but for some reason the browser hinting is showing that we should be using the 1200w version of this image on mobile:

    https://us.v-cdn.net/cdn-cgi/image/fit=scale-down,width=800/https://i.imgur.com/e6CG4C8l.png 1200w,

    but instead we're getting an image rendered out at size that doesn't match any of the srcset sizes instead:

    Rendered Size: 208x136

    dropping the srcset tag altogether makes the images legible again, although doesn't fix the actual bug with the browser calculating an incorrect size

    This is probably working as intended. The resolution referenced is enforced as maximum width. It's implemented as [if larger] "scale-down" [to fit] "width=800"

    Set it lower than 208 and that image will get smaller.


    Note: Mobile Chrome has two workarounds for general legibility issues this may be causing my fellow Olds:

    Long press -> Preview Image

    Or: Settings -> Accessibility -> Force Enable Zoom

    ArbitraryDescriptor on
    BroloMichaelLC
  • AldoAldo Hippo Hooray Registered User regular
    edited May 2023
    This appears to have been fixed... Lets see
    https://www.youtube.com/watch?v=nQH0r2yGgJc

    *edit: nope

    Aldo on
  • spool32spool32 Contrary Library Registered User regular
    This remains broken, a year after the first report.

    ReynoldsTexiKenNeveronSkeith
  • ChanusChanus Harbinger of the Spicy Rooster Apocalypse The Flames of a Thousand Collapsed StarsRegistered User regular
    this appears fixed now or maybe i am just a special boy

    Allegedly a voice of reason.
  • BahamutZEROBahamutZERO Registered User regular
    edited February 10
    still the same behavior for me on firefox desktop
    o3y3nhtlama1.png


    mobile firefox on android is more or less working right, but the preview thumbnails are vertically off centered in their allotted space so that there's a black bar at the top and the bottom of the thumbnail image is cut off. The URL is replaced by the video player placeholder box correctly though, and the player placeholder box is the right size.

    bs88v59caugg.jpg

    BahamutZERO on
    BahamutZERO.gif
  • SurikoSuriko AustraliaRegistered User regular
    The embed text can be patched away with this CSS:

    .VideoPreview {
    font-size: 0 !important;
    }

    It's a quick hack but it works fine. This is now included in the Ye Olde Style stylesheet.

    ReynoldsRingodestroyah87ShadowfireBahamutZERO
Sign In or Register to comment.