Discover the best video-embed websites created by professional designers. Get inspired and start planning your perfect video-embed web design today!

From my Webflow online course community came the wish to build this video player, which basically runs in a loop without sound as a background video. 
If you click on on the unmute button, the video plays from the beginning and the sound is activated.  

We need a bit of custom jQuery code for this. In addition, the Vimeo API must be included if you want to address Vimeo iFrames.

Watch the tutorial here: https://youtu.be/mKFZxHpYGng

Vimeo Background Video with Play Sound Toggle

Responsive, full-screen, Vimeo video embed

Change out the video link in the "video-embed" element nested in the "video-wrap" div

Background Video Embed

background-video-embed

Another collaboration with my favourite video photographer. We started to work on this site for educational purpose and we fell in love in the concept. 

Comment if you think we should develop it into a personal stock footage store.

Follow Ilya on instagram
https://www.instagram.com/ilyalisi/

Tutorial & Assets:

Html5 Video Player
https://www.youtube.com/watch?v=yx-HYerClEA

Page view count
https://countapi.xyz/

Like Button
https://likebtn.com/en/

Icons
https://ionicons.com/

Video Player

Custom video player for personal stock footage

This is how to use a Vimeo video as background video in Weblow. You can change the video easily within CMS (Editor).

Vimeo Background Video

vimeo-background-video

Create a stylish Video Player in Webflow. Customize each single part of the player to make it unique, remove and add the elements you want. Enjoy absolute design freedom. To have this tool working you need to enter a code in your Webflow project. You’ll find that code in the pdf (with a guide about the configuration steps) you’re going to download after the payment.

Webflow Video Player Cloneable

Using a few lines of html code, I will show you how to start using MP4’s instead of GIFs to showcase the animations in your websites and portfolio. And the advantages it brings.

Embed MP4 instead of GIFs

Using HTML code to Embed MP4 files into your Website instead of GIFs

A quick example of making a Vimeo embed with autoplay responsive

Responsive Vimeo Embed

Responsive Video Embed

youtube-live-embed

Embed Video is one of the limitations for starter plan. But here you can clone this project and embed whatever Youtube or Vimeo video you like using CMS and it has free 10 Blank Static pages so you can start your own personal project.

Starter Plan Can Embed Video

Use this cloneable to:

- Block video embeds before users have given consent
- Style the block natively in Webflow
- Block both standard embeds and videos inside Rich text

This is the best solution I've come up with, and it gets the job done. It requires not using the video elements but instead relying on HTML embed element instead. Hopefully Webflow figures out a native way at some point, when they see the important of adhering to GPDR rules:)

Note: embed Youtube videos using the embed code url and not the standard share URL.

Note: See all the divs in the style block, including the custom css

Discover video embed websites built by the Webflow community

Discover video embed websites built by the Webflow community