Plyr Video Player for Webflow

A comparatively simple and visually appealing way to integrate GDPR-compliant videos from YouTube and Vimeo into your Webflow projects, using a uniform video player using Plyr JavaScript Library.

The Plyr library itself has the sole purpose of displaying videos from different sources in a uniform and flexible video player, as well as controlling them. My JavaScript enables:

1. Videos are only loaded with Plyr when a user presses play within the video placeholder, if a placeholder is present. If there is no placeholder within the video component, the video loads directly.

2. The click on the play button ensures that all existing placeholders are hidden and Plyr loads all videos. It is therefore a GDPR-compliant 2-click solution, as long as you make it clear within the placeholder that clicking on the play button sends personal data to the respective providers. The video where the play button was clicked will also be played directly.

3. The click on the play button is noted in the localStorage, so that videos are loaded immediately when switching pages or re-accessing the website.

4. You only need this JavaScript I developed for all video components on the website.

Before you consider buying this product, I strongly recommend you to have a look at the cloneable that was developed for it:

Plyr Video Player - Made in Webflow

After your purchase:

1. Clone the cloneable to your dashboard,

2. Copy the video component(s) of your choice from the cloneable into your project.

3. Add the necessary snippets for functionality, which you get via the download link in your purchase email, to your project. Important: To see the content of the HTML, it is best to open it with a code editor of your choice (e.g., Visual Studio Code).

4. Customize the components as you want them for your project.

If you have found a bug, please send me a message on Twitter: Twitter/Dennis_Karg