search

sharu725 / youtube-embed

Embeds a clickable youtube thumbnail instead of the iframe. Upon clicking, loads the iframe.
https://embed.sveltethemes.dev
36 stars 7 forks source link

UI, UX & DX enhancements, workaround for default low quality thumbnails and more ... #6

Closed amr3k closed 2 years ago

amr3k commented 2 years ago

Video info

The component now fetches video information from youtube asynchronously using svelte sugar await .. then syntax. I used two pieces of information from that response which are:

Video width and height

I'm using those to calculate aspect ratio (for max compatibility) to be used for the image & overlay, I also set a default fallback to 16 / 9 in case the request fails.

Video title

It is now used in multiple places, in top of the interface, a bit similar to youtube embedded iFrame.

It's also used for the HTML attribute title for some elements, I also think it should enhance accessibility.

Default thumbnails

Some videos don't have a custom thumbnail, so YouTube normally would pick a frame from the video and assign it with the name hqdefault.jpg.

In this update, I added a prop called alternativeThumbnail to Youtube.svelte with the default value of false, normally, the component requests maxresdefault.jpg, but if this prop was set to true , it will request hqdefault.jpg.

Feature policy

I added Picture in Picture permission for the iframe as well as clipboard-write to allow copying video url.

Demo

I updated index.svelte and added two new demos.

Title controls

vercel[bot] commented 2 years ago

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/webjeda/youtube-embed/GsXw4kCfWtvw57thN4zjae6NP5XX
✅ Preview: https://youtube-embed-git-fork-416d72-master-webjeda.vercel.app

sharu725 commented 2 years ago

Sweet @416d72 ! Can you please add an example usage in README as well. Also, should we make the choice of deciding whether to use alternativeThumbnail instead of the user? Something like, if maxresdefault is not present then use hqdefault

amr3k commented 2 years ago

Ok, I updated the README with new usage examples.

Also, should we make the choice of deciding whether to use alternativeThumbnail instead of the user? Something like, if maxresdefault is not present then use hqdefault

I had this idea, but honestly couldn't think of other than using sharp which is not possible in this case since it runs on the server.

The video info contains thumbnail link which mostly is hqdefault.jpg not maxresdefault.jpg .. so If we used this we lose the custom high res thumbnail!

See this example