originalexe/vidim

Background videos made easy. Supports both YouTube and self hosted videos.

vidim

vidim is a no-dependencies library for displaying background videos in modern browsers (and IE9)

It supports all modern browsers, as well as IE9+. It's worth noting that a lot of mobile devices and tablets do not allow for automatic playback of videos (or their playback in the background), and since there is no universal and easy way to detect that, it's left up to you to figure it out. In the docs, I provide a more detailed description and explain what I used in the demo.

Demo

What providers are supported

The library right now supports self hosted videos, as well as YouTube. Vimeo is not planned as it's not possible to elegantly hide the UI of their free player, and PRO users have an option of getting the video source directly anyway so they can still use this library with the self hosted provider.

How to get started?

npm install vidim or yarn add vidim

I would also suggest reading the docs

How to contribute

Clone the repo, run

npm install

followed by

npm run test

and

npm run devWatch

Then, make changes in the src folder, check that tests pass and create a pull request with the changes. Also, make sure you install editorconfig plugin for your editor, in order to follow the syntax of the project.

You can also help out by reporting any issues and feature requests :)

vidim's Issues

Support using youtube-nocookie.com

vidim/src/providers/youtube.js

Lines 87 to 88 in 795bcdd

	const playerParams = {
	videoId: this.videoID,

Although it does not seem to be documented in the YouTube Embed API Reference, adding in host: 'https://www.youtube-nocookie.com', to the outer playerParams object will tell the API to use the version of YouTube that does not set tracking cookies.

This is especially useful for EU websites that have GDPR concerns.

See https://portalzine.de/dev/api/youtube-iframe-api-and-cookieless-domain-solution-gdpr-dsgvo/

YouTube 'origin' player parameter

vidim/src/providers/youtube.js

Line 97 in 38085bd

origin: window.location.host,

Although not mentioned in the player parameters documentation (https://developers.google.com/youtube/player_parameters#origin), after reading the documention on the IFrame Player API (https://developers.google.com/youtube/iframe_api_reference), it looks like the origin parameter should include the protocol and port also:

origin: typeof window.location.origin !== 'undefined' ? window.location.origin : window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port: ''),

https://developer.mozilla.org/en-US/docs/Web/API/Location/origin says location.origin is not supported in IE/Safari/Opera, however it seems to work in IE11 and Edge from limited testing - the above snippet includes a fallback just in case.

YouTube video pauses constantly

First, I want to say you've done an excellent job with this library. It's easy to setup and I love the fluidity between self-hosted and youtube as options! So, thank you so much for coming up with an elegant solution to this highly popular feature 😎

One thing I noticed however, is that the video seemingly reloads itself FREQUENTLY. It seems to happen often when I leave the page and come back, resize the browser, or simply wait for it to loop. I'm constantly getting the loading spinner, even though the YouTube video has clearly already loaded fully (testing with a 10 sec clip).

Any ideas why this is? It's unusual and not something I see happening with the more basic CSS implementations of YouTube background videos, which leads me to believe it has to do with how you're looping the video or interacting with the API.

Back to page with video loop not working

Hi,
When I go to my site with a youtube video loop It works, but If I leave that window/tab and then come back it doesn't work anymore, it stays with the youtube loading spinner.

On chrome with windows 10.

Loop on youtube not working

Windows 10
Chrome

Where? https://originalexe.github.io/vidim/#docs

Vimeo

It would be perfect if it supports also Vimeo!:)