Skip to main content ↑ ↓
Topic: Video Embed's (Read 2242 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Video Embed's

Going to place a few posts in this thread, each with a sites video "stuff" for discussion / input / ignore

Our video embed code (1.1) currently supports YouTube, Vimeo and DailyMotion.  I don't use the last two so really have no idea if they are still worth supporting or not.  Each of these sites does make it easy to embed items as well as fetch the preview thumbnail, they really are geared toward easy embeds.

Also of importance is the way we go about the embeds.  We fetch just a preview image which is lite and fast.  Once the image is clicked, the sites video embed code/player/scripts/html etc. is fetched into an iframe and begins playing.  That can be quite a bit of data, and can be slow as well, that's why its not loaded unless requested by the user/viewer.

Before any preview loads (or it fails), it will use a sites logo as the background just so there is not an empty box on the screen. The logos are part of the JS embed and are saved as simple SVG's .

That brings me to adding additional support for other sites and some of the difficulties involved.  I've looked at adding TikTok, Twitter, Facebook and Instagram support, and each as their restrictions, I'll make a post for each site, with any issues of note.
Last Edit: May 20, 2022, 02:09:46 am by Spuds

Re: Video Embed's

Reply #1 –

First up is the standard YouTube, should be straight forward with an easy to fetch preview image.
Code: [Select]
https://www.youtube.com/watch?v=2IYxm7KOm9s
https://www.youtube.com/watch?v=YNjB-ubrT-c

https://www.youtube.com/watch?v=2IYxm7KOm9s
https://www.youtube.com/watch?v=YNjB-ubrT-c

Also I don't know what these videos are, I'm just quick grabbing crap of the main page :innocent:
Last Edit: May 17, 2022, 12:36:05 am by Spuds

Re: Video Embed's

Reply #2 –

Next a quick Vimeo vid, very similar to youtube in what needs to happen
Code: [Select]
https://vimeo.com/706175904
https://vimeo.com/708244501

https://vimeo.com/706175904
https://vimeo.com/708244501
Last Edit: May 17, 2022, 12:36:23 am by Spuds

Re: Video Embed's

Reply #3 –

And now something from DailyMotion, again same basic embed. 

For me the site is very slow, sometimes coming up blank:mushroom:
Code: [Select]
https://www.dailymotion.com/video/x87yuz4
https://www.dailymotion.com/video/x89mguz

https://www.dailymotion.com/video/x87yuz4
https://www.dailymotion.com/video/x89mguz

Who are these people, why does anyone care?
Last Edit: May 17, 2022, 12:36:43 am by Spuds

Re: Video Embed's

Reply #4 –

Oh, you want more? of course you do, its the internet, so here is tiktok, remember YOU asked for this.
Code: [Select]
https://www.tiktok.com/@sassysoundsasmr/video/7091443256378248494?enter_from=video_detail&is_copy_url=1&is_from_webapp=v1
https://www.tiktok.com/@the.mcfarlands/video/7003480282145852677?_t=8RvxobUnrVS&_r=1

https://www.tiktok.com/@sassysoundsasmr/video/7091443256378248494?enter_from=video_detail&is_copy_url=1&is_from_webapp=v1
https://www.tiktok.com/@the.mcfarlands/video/7003480282145852677?_t=8RvxobUnrVS&_r=1

Supposedly those are funny. 

Important notes, at least with TT we can usually grab a preview image which is nice.   They seem to all be in portrait which make sense as its designed for mindless phone consumption which beats having to interact with humons. 

I chose to show the preview in 16/9 so some cropping will occur but it take up a lot less vertical room this way.  Once you click on the image it will flip to a 9/16 portrait mode and the page will reflow.  We really don't know the size of the embed itself, one could set a max size but its really not the best in my testing as the video can really narrow down with all the other content that comes on in,

Re: Video Embed's

Reply #5 –

Did you think this was over ... nope, next is facebook.

Code: [Select]
https://www.facebook.com/revistapegn/videos/10153713928657635/
https://www.facebook.com/facebook/videos/10153231379946729

I decided to only support video embeds, not posts or timelines or any of the other stuff.  Honestly I'm surprised the video embed works at all. 

Facebook really Really REALLY wants you to join, so even as a developer you need to go the Full Monty with them to get any access.  You can not get a preview image without getting an app id and then using their graph API and a bunch of other stuff.  They changed oembed and it requires an app_id as well.  That would mean each admin would have to get their own app id as well. 

So no preview, only the old FB logo (or if one wants the limp infinity).  It seems to behave as it should but I have done almost no testing as I don't have a FB account and most pages I go to demand I log in, like now, right now!

https://www.facebook.com/revistapegn/videos/10153713928657635/
https://www.facebook.com/facebook/videos/10153231379946729

Re: Video Embed's

Reply #6 –

How about some twitter, the place for open discussion on topics that most don't give a darn about, or a place to be the ultimate narcissist.

Code: [Select]
https://twitter.com/Interior/status/463440424141459456
https://twitter.com/KatieWoolard/status/1525298113241567238

Twitter is a bit funny in the API.  You do not seem to be able to make a call directly from JS due CORS restrictions:boom:  So instead we have to make an API call from your site server to get the embed code and then display that.

An alternative would be to do a click and load, much like the facebook post above.  But as an experiment I set up the server call to get and show the embed, and as a bonus its a lazy load, so it will not fetch until its in the viewport.  Now someone may say you can just put loading=lazy on the tag, well no you can't as the tag is rendered by the script thats in in the embed, ha!

So here is Twitter, will show the twitter logo until the post is in frame and then it will fetch the tweet (which may or may not even have a video in it, its a tweet embed)

https://twitter.com/Interior/status/463440424141459456
https://twitter.com/KatieWoolard/status/1525298113241567238

Last Edit: May 20, 2022, 12:38:07 am by Spuds

Re: Video Embed's

Reply #7 –

I'm sure you are sad to see this come to an end, but here it is ... Instagram 

Code: [Select]
https://www.instagram.com/tv/CbiFqgQDcVe/?hl=en
https://www.instagram.com/p/CdgNEWRjpiu/

This is really the same as FB, same API restrictions, signup demands,  and all the rest.  The only difference is that Instagram seems to be portrait and FB (at least videos) are not.   Honestly not sure that is 100% or even 50% true as w/o an account I can't rummage around and see what crap is being posted, yes my loss indeed.

So here are the vids only showing the logo which are clickable to load the content.

https://www.instagram.com/tv/CbiFqgQDcVe/?hl=en
https://www.instagram.com/p/CdgNEWRjpiu/

Yea no set of video posts is complete w/o a cough funny cat video.
 

Re: Video Embed's

Reply #8 –

YT, Vimeo, Dailymotion seems to work fine, but after that there is something wrong

Re: Video Embed's

Reply #9 –

I bet you are on the 2.0 theme, toggle back to the default and it should look good:pray:

Re: Video Embed's

Reply #10 –

yep, switched to default and no more strange images
sorry for my bad english