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.

Youtube - without Placeholder

Loads the video directly and initialises the Plyr Player

Delete localStorage

Youtube - Placeholder V1

The video will only be loaded if the user clicks the play button or has already done so.

Before we can show you YouTube videos, we must inform you that data may be sent to the provider when you view the videos.

Delete localStorage

Youtube - Placeholder V2

The video will only be loaded if the user clicks the play button or has already done so.

Before we can show you YouTube videos, we must inform you that data may be sent to the provider when you view the videos.

Delete localStorage

Youtube - Placeholder V3

The video will only be loaded if the user clicks the play button or has already done so.

Before we can show you YouTube videos, we must inform you that data may be sent to the provider when you view the videos.

Delete localStorage

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.

Custom Attributes

video-component

" "

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.