Embedded YouTube video without unnecessary elements
Embedded YouTube video for courses without unnecessary elements, except for the video scroll bar, play/pause button, speed control, volume and full screen button.
As an example, tutor-video-player from TutorLMS in the screenshot. It works automatically when you insert a link to a video.
Andrey Golovinov TutorLMS have hard coded that. Out of interest what happens if you right click on the video? Have you got the option to download the video or at least get the video URL? what about if you inspect the page with your console. Can you find the video source. What happens when the video ends? Does it show the related videos etc?
To my knowledge I'm not sure if what TutorLMS have done is correct. Check the terms for YouTube. If you have been found to modify this anyway they can remove your account without notice. So make sure what Tutor have done is legit.
Ryk Melck, I am not sure what is the request purpose: to protect video content? better feel & look?
ref: YouTube Embedded Players and Player Parameters
ps. I was not able to add the comment to the original post above (probably comments are disabled however I was able to reply to you Comment as the comment for this Comment is not disabled hahaha
Ryk Melck,Right click does nothing, but inspect the page show the video URL.
But FCommunity doesn't show the link when inspecting the page. So it would be great if my request will possible.
Mat,To protect video content.
Mat, the purpose is to alter the youtube video look and functionality. And yes it also trying to attempt to protect video content Not sure if that is possible). I found this link about the player on TutorLMS and one thing they are doing is hiding the youtube branding and from what I remember this is not allowed. https://tutorlms.com/blog/tutor-lms-update-v2-2-4/
Andrey Golovinov, the only way to protect it is with Presigned URL - link also here like bunny.net offers it. Using public videos from YT (they need to be public for embed) is just lying to yourself - it is not possible if you want me be honest.
Ryk Melck, protecting public (no google auth required) YT videos with embed might be a challange.
It is enough to just go to the Dev tools > Inspect/Console/Network etc
>Go to the Dev Tools - F12
> run/play the embeded YT video (ex. in your course)
> check the Network tab and look at the column: Transferred
> click the right NS_Binding
> look at Headers of the right side > Host and Referer
Also check some plugins for the browser who can reveal YT links.
ps. if we dont use Presigned URL then it is easy to copy video content - many videos in container buckets like S3 can be downloaded if they are not using the Preasigned URLs.
Andrey Golovinov, btw: here is a related link in case someone wants to protect the course content (text).
Andrey Golovinov, I had a look on the TutorLMS demo. Your YouTube videos are not protected. All you are doing is masking the behaviour. If they really want the video they will find away to download it or do a screen recorder. Inspecting the page gets me to the full URL.
Ryk Melck,Try to inspect FC course lesson page. I didn’t find any URL.
Andrey Golovinov, did you follow this example:
>Go to the Dev Tools - F12
> run/play the embeded YT video (ex. in your course)
> check the Network tab and look at the column: Transferred
> click the right NS_Binding
> look at Headers of the right side > Host and Referer
Note: protecting YT public videos its time "wasting" - there are workarounds and probably many browser extensions for that.
Note: if you store your video on AWS S3 public bucket (without presigned url) it can be similar story as with YT if you knows how public bucket works (without any additional layer of security).
Note: see also Video DownloadHelper plugin and other similar plugins.
Mat, I could be wrong so it will need another person take on this. The Youtube API is very clear. Maybe I'm not reading this correctly. I would hate Fluent to get messed up in some legal battle etc. Maybe Shahjahan Jewel can provide more insight into this. https://developers.google.com/youtube/terms/api-services-terms-of-service
Ryk Melck, some YT video player visual elements dont have to be visible as YT has docs for this but I wouldnt bother to hide any of the player element for oembed. If someone wants to use custom features then try Custom Embed.
To protect content there are other ways to do it but not free of charge and probably nobody will block screen recorders.
Mat,Ok, I see. Thanks!
It is similar to the way you use Presto Player, which helps to improve the video viewing experience. In addition, users cannot copy the video link. Unfortunately, Presto Player is not yet integrated with FluentCommunity.
Ryk Melck, Yes, with the "inspect the page" method, we can still get the link. It's just to hide it from ordinary users. But for real security, we still need solutions like Bunny storage. So currently I still use Thrive Apprentice to manage paid courses. The course on FluentCommunity is free and can embed Youtube links.
Hoang Hxn, probably browser extensions can easily download videos from Presta Player (I am not talking about contant that is protected by Thrive Apprentice) too but I didnt try it since this is not my case.
BTW: You can install Video DownloadHelper on Chrome and Firefox for this purpose. Downloading embedded videos through this method is quite hassle-free. Here is how you can do it.
- Install the appropriate browser extension on your default browser.
- Restart your browser and visit the web page with the embedded video.
- Play the video you wish to save on your device.
- Once the web player plays the video, click on the icon of the installed extension.
- After clicking on the icon, you will see various options.
- You can choose the “quick download” or “download” option.
- The download option will ask for the desired destination to save the video.
- The quick download option will save the video without asking for the destination
Mat Are there any alternatives to Bunny.net for protecting videos via pre-assigned URLs? Could you recommend anything proven? I'm looking into options to use for my courses.
Andrey Golovinov are you wanting to use it for the Fluent Courses or for Tutor LMS as you previously mentioned. Try Streamable it's very simple to use. Here is one of my videos and it's protected by domain. https://streamable.com/xrnku4
Andrey Golovinov, and I forgot to mention it's very affordable compared to Vimeo etc.
Andrey Golovinov, the cheapest vs quality is Bunny.net (it is well known and supported by many solutions) - you will get also CDN for videos. With AWS S3 you will need to take care of the CDN CloudFront and it will be very expensive in the final run.
You might also check: Wistia or Spotlightr or ask big content creators here for their opinion and suggestions.
Note: I am not sure who else offer presigned URLs feature so check out.
Remember... you need to implement Presigned URL even for Bunny.net if you want to protect your video content otherwise it will be just a cloud container and if you make it public (you want to link to the video stored on bunny.net) anybody with some technical knowledge who get the link will be able to view the video. If the video is protected with Presigned URL it will only work with temp auth token - only your student will be able to watch it.
Note: you wont be able to protect your video content from screen capture tools.
Ryk Melck, thank you! ❤️ For Fluent Courses. Will check Streamable.
Mat, thanks for the detailed answer. I'll explore the options, but it looks like bunny.net will win 🤓
Andrey Golovinov, just hold on for a minute. I just added my URL and fluent is not accepting that.
Andrey Golovinov, lets just wait for the presigned url implementation here (you can ask the question if needed) so you will make sure what is the Bunny.net implementation here - is it just a simple video embed on the external storage or also with preassigned url.
Anyway... Bunny.net is an alternative.
Andrey Golovinov, I just double checked. The URL does not work, however the embed code works.
Ryk Melck, thank you, friend!
Andrey Golovinov, adding some link for reference so other can read it how Streamabe protect the video.
How to embed videos private community
To understand the streamable protection we should get into details. I hope they dont protect the video just by reading the referrer = yourdomain.com parametr. Also I am not sure about their pricing, CDNs etc but it is a worth to check it out.
There is a small pricing difference I guess between Streamable vs BunnyNet
Thank you Mat!
Make sure to check Vimeo. you have secure control of the playback URL along with the interface components.
James Maduk, thank you, will check.
James Maduk,I can't seem to keep up with Vimeo's services. It looks like they have made changes again. Previously one was limited to how many video's you could upload on a monthly basis etc.
Ryk Melck, - I've been a customer for years, I've missed all the pricing changes :-).
When I did look now, looks like the pricing is based on storage not upload/month. https://vimeo.com/upgrade-plan
I guess it really depends on what additional features that you are really going to be using, like the transcriptions, embedded CTA link, custom branding and text editing like descript.
I originally starting using Vimeo because the videos couldn't be downloaded and you could control what domains the videos were streamed from.
The other thing to consider is that it's a long term relationship! Once you pick one changing to another platform is a hassle.
Personally I've got 1K+ videos on Vimeo, so having simple URL structure and a easy to use interface to organize all your video content gets important quickly.
James Maduk, there is no chance in hell you can move from them. That would be a logistical nightmare. 1K + videos, thats crazy going 😀
As you know from the LearnDash LMS space, domain privacy is important. Vimeo trumps all the other providers because of it's ability to protect videos that are inserted into H5P Interactive video.
Ryk Melck, you can use migrstion tools or API - sharing JIC
Gumlet - https://docs.gumlet.com/docs/import-from-vimeo
Spotlight - https://docs.spotlightr.com/en/collections/2141262-video-migration
Video api - https://docs.api.video/get-started/vimeo-migration
AWS S3 via API - https://stackoverflow.com/questions/51409605/migrate-videos-from-vimeo-to-s3 + https://github.com/aws-samples/videos-transfer-vimeo
Dacast - https://www.dacast.com/support/knowledgebase/easily-export-your-vimeo-videos-to-your-dacast-account/
Panda video - https://help.pandavideo.com/en-us/article/transferring-vimeo-videos-to-panda-kf6gxw/
Alternative chrome extension: https://chromewebstore.google.com/detail/vimeo-to-google-drive/agpkdajgpjmhmibmnhcgkfinlhoagjep
Ryk Melck, it is just an example of how someone can migrate videos from vimeo to other providers - it doesnt have to be paintfull hahaha.
Nothing else but just links in case someone want to run away from vimeo. Who knows what People will look for here. I paste it here Just In Case (JIC)
If someone wants to move videos to Gumlet or any other video hosting from vimeo there is a faster than manual way to migrate with those examples above.
Mat, I was referring to the links that have been added to LMS tools like Learndash/Lifter/Tutor or even FC that ask for a direct URL from the host.
James Maduk, got it.
BTW: you are lucky with the deal you have with Vimeo. Nice! Congrats!
Mat, just logged into my vimeo account.. gotta laugh first video uploaded Dec 12, 2013 !!!!
James Maduk, OMG you are a legend
Adding related post for video hosting implementation - I am not sure what is the plan for the integration with BunnyNet etc but you can keep an eye on it and make a followup if needed (it might be critical for courses module for some of us). More feature requests for video hosting integration gives higher chance that this will be implemented
Maybe in the future, we will integrate with Video hosting services like CloudFlare / Bunny. The video should not be self-hosted as it's requires encoding and take lots of resources and bandwidth.
Also for Presto Player comment link:
I am not sure about the Presto-Player integration yet as we are currently focusing on core features.
Andrey Golovinov I have Integration of Presto Player in the FluentCommunity Course 👉 Check out the full step-by-step guide here