mrwweb / enhanced-embed-block Goto Github PK
View Code? Open in Web Editor NEWEnhance the default YouTube Embed Block in WordPress to load faster.
License: GNU General Public License v3.0
Enhance the default YouTube Embed Block in WordPress to load faster.
License: GNU General Public License v3.0
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:
name | resolution |
---|---|
mqdefault | 320x180 |
hqdefault | 480x360 |
sddefault | 640x480 |
maxresdefault | 1280x720 |
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:
!important
Complicated solution:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.