Refactor: Use AspectRatio in Youtube component

[TylerAPfledderer]

Description

Replaces Box component with a more robust AspectRatio component, which is primarily used for media elements. Adds enhanced sizing with aspect ratio equal, and equal existing sizing of the iframe in its current rendering.

It also creates a better render at mobile screen sizes.

Before:

After:

Note:

This makes the iframe styling in the styles file unnecessary.

Related Issue

N/A

[gatsby-cloud]

✅ ethereum-org-website-dev deploy preview ready

• Deploy preview
• Build logs · 36m build time

[pettinarip]

Love this.

There is one more place where we are using an iframe:
https://github.com/ethereum/ethereum-org-website/blob/dev/src/content/developers/docs/consensus-mechanisms/pos/attack-and-defense/index.md#L68

I think we should implement the AspectRatio in there as well since without those global styles it is breaking.

[TylerAPfledderer]

@pettinarip I shall make a note to take a look at that as well. 👍

[TylerAPfledderer]

Love this.

There is one more place where we are using an iframe: https://github.com/ethereum/ethereum-org-website/blob/dev/src/content/developers/docs/consensus-mechanisms/pos/attack-and-defense/index.md#L68

I think we should implement the AspectRatio in there as well since without those global styles it is breaking.

@pettinarip Would you consider a more generalized AspectRatio component in place of the Youtube component?

With what the Youtube component renders and the iframe you referenced, I am seeing a pattern of styling:

• Aspect ratio of roughly 16 / 9
• maxWidth of 560px
• Vertical margin of 32px (8)
• Both could compose the figure element as the wrapper.

You would have to supply this new component with the above styling as default to override the defaults coming from the Chakra component, as AspectRatio is not a part of the theme config. In other words, you would not be able to set base styles in the extended theming.

What do you think?

[pettinarip]

@TylerAPfledderer thanks for sharing that thinking, really appreciate it.

Now that I think more about it, I think that we are good and we cover most of our use cases with this refactor and component that you did in this PR.

I don't think that we need a more generalized component for this right now unless we see more often that we use this component.

Merging it as it is for now. Good job on it!