mrwweb / enhanced-embed-block Goto Github PK

The Stable Tag field is invalid, the specified SVN tag /tags/0.1.0/ does not exist. /trunk/ will be used instead.
The Stable tag field is missing or invalid. Note: We ask you no longer attempt to use /trunk/ as stable, so that all plugins can be rolled back.

Tracking potential upstream fix in justinribeiro/lite-youtube/issues/79.

For now, I'm considering using the following to make this work by adding this starting on line 242:

this.domRefImg.fallback.onload = (e) => {
	if (e.target.naturalWidth === 120) {
		e.target.parentElement.firstElementChild.remove();
	}
};

The default poster image size for <lite-youtube> is "hqdefault", which I guess is 480x360. This looks bad when displayed full width in a content area. The component does support a posterquality attribute that accepts values that apparently correspond to the following resolutions:

Considering how the embed block renders, I think maxresdefault/1280x720 is the only reasonable choice for most sites. I would guess the default content area width in most themes is larger than sddefault's width of 640px.

(YouTube should really provide more granularity here, but I guess they didn't leave themselves much wiggle room after naming the 720p size "max res".)

In a full text RSS feed, the <lite-youtube> embed is included. It all still works since the fallback is a link that says "watch whatever on YouTube" (yay progressive enhancement!), but it would probably be better if it just did a if (is_feed()) check before changing the markup since <lite-youtube> will never work in this context.

In #5, you mentioned adding a filter/setting for the poster image size. It would probably also be a good idea to add one for the nocookie attribute in case someone needs to disable that for some complicated analytics-related reason.

Our theme has a little color tint when you hover over a link:

That also applies to the .lite-youtube-fallback link if the lite-youtube script fails to load:

Easy solution:

• also apply the background color with !important

Complicated solution:

• stop changing the link color, and instead generate the background color from it by using some of those fancy new CSS color functions: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors