Plyr Video Player for Webflow
The most flexible way to integrate and control videos from Youtube, Vimeo or self-hosted into your own website. Especially if you are developing a website for yourself or a company within the GDPR space.
HTML5 - Placeholder V1
For HTML videos, no data privacy notice is necessary, so you can enter the title of a video here, for example.
HTML5 - Placeholder V2
For HTML videos, no data privacy notice is necessary, so you can enter the title of a video here, for example.
HTML5 - Placeholder V3
For HTML videos, no data privacy notice is necessary, so you can enter the title of a video here, for example.
This is what you get
With this cloneable you get a JavaScript developed by us to display videos from Youtube, Vimeo and static videos in a unified player with the help of the Plyr JavaScript Library and to integrate them into your projects with a GDPR compliant 2 click solution.
2-Click Video Embedding
Embed videos from Youtube and Vimeo in a GDPR-compliant way as an accessible and beautiful 2-click solution
Store consents to localStorage
Store users' consent to view videos from external sources so that they are only asked to do so once on multiple visits to the website.
Flexible script for adjustments
Bind user consent to your cookie consent, customise the controls of the Plyr video player and much more.
How to start
1. Clone this project
Before you can copy and paste elements from this project into your project, you must first clone this project in Made in Webflow.
2. Copy and paste / rebuild the video component you want to integrate into your project
Each complete component is wrapped in an Element with the class name ⚡video_component .
If you want to rebuild a complete video component instead of copying it, note the attributes set on corresponding elements such as video_placeholder-0X and video_play-button.
You can also integrate the video component into rich text elements (with or without CMS). Just note that in this case you have to add the placeholder as HTML code.
3. Copy and paste the Code from the HTML file to your project
As this is an exclusive cloneable, you will only get the code needed for the functionalities through your support on Patreon or through your purchase on Lemon Squeezy. After your support/purchase, you will receive access to an HTML file of the cloneable, which contains all the necessary steps for integrating our code into your Webflow project. Important: Open the HTML file with a code editor like Visual Studio Code to see the content.
4. Change video source and style the component
There are 3 supported video sources from Plyr: Youtube, Vimeo and HTML native video. The video IDs referenced in the examples can be found in the URLs of the videos you want to embed. Let's take the video URL of the Youtube and Vimeo videos used in this example.
For YouTube, the ID of a video is www.youtube.com/watch?v=q-ktd4nEi3w
For Vimeo, the ID of a video is https://vimeo.com/401683411
For the visual customization of the Plyr player, I recommend the section on customizing the CSS in the Plyr documentation.
5. Adjust the functions of the Plyr Player if desired
If you want to customise the Plyr Player code and find out what is possible, I strongly recommend you to have a look at the Plyr documentation.