Putting a YouTube video inside a closed details element means it won't load until that details element is opened. We can use that.
Before you get too far into this post, maybe read Browser Video Players Review. There I wade into the accessibility of the <video> element based on the video players browsers provide. Then maybe read Scott Jehl’s How to Use Responsive HTML Video (…and Audio!). I am leaning on support in…
tl;dr
GIFs are awesome but terrible for quality and performance
Replacing GIFs with <video> is better but has perf. drawbacks: not preloaded, uses range requests
Now you can <img src=".mp4">s in Safari Technology Preview
Early results show mp4s in <img> tags display
This is a very clever idea via Arthur Corenzan. Rather than use the default YouTube embed, which adds a crapload of resources to a page whether the user
Provide videos with a supercharged focus on visual performance. This custom element renders just like the real thing but approximately 224× faster.
Gute Zusammenfassung bei Google über das Video-Element
Guter Artikel über die Möglichkeiten des track-Elements
Video for Everybody is simply a chunk of HTML code that embeds a video into a website using the HTML5 <video> element, falling back to Flash automatically without the use of JavaScript or browser-sniffing.
Same HTML/CSS skin and JavaScript API for HTML5 and Flash Video