rishabhp / bideo.js Goto Github PK

I don't want to autoplay on load, I want to start playing on a custom event.

Even commercially

hello,

it seems when removing "muted" tag, the auto-play function stops working... maybe its some-kind of protection mechanism in the browser to not play background videos.

but i saw some other platform like videojs, jwplayer & youtube starts automatically playing videos that are in the background.

so, i think its something has to do with bideo.js code, so- kindly do let know how i can auto-play the video in the background with sound.

thanks.

On line 124, there's an if statement.

Shouldn't that have an exclamation point?

Plugin was not working until I added it.

http://codepen.io/birkir/pen/EyxOYz

IE doesn't know how to object-fit, but theres an polyfill [1] which is certainly smaller and moe universal than this plugin. Other browsers support it well [2].

[1] https://github.com/jonathantneal/fitie
[2] http://caniuse.com/#search=object-fit

Is there a license for bideo.js?

Would it be possible to fade in the video once it is loaded?

For installing it via bower.

With reference to #1, it says that most features there have been added.

But I briefly skimmed through the source code and couldn't find any reference to YouTube and Vimeo.

So are these supported?

Hiya, thanks for this awesome plugin! 💯

I was wondering. Say you have a video of approximately 2 seconds. You want to wait before playing it, lets say 5 seconds. then play it, wait at last frame for 3 seconds, play it in reverse, then wait again a few seconds. Random intervals would be a bonus.

How would i go about that? :)

using this code—

import 'rishabhp/bideo.js'

export function videoHeader () {
  const bgvid = new Bideo()
  bgvid.init({
    videoEl: document.querySelector('#bgvid'),
    container: document.querySelector('#custom-header'),
    resize: true,
    autoplay: true,
    isMobile: window.matchMedia('(max-width: 768px)').matches,
    src: [
      {
        src: '/video/video_header.mp4',
        type: 'video/mp4'
      }
    ]
  })
}

and this css

#custom-header {
  height: 100vh;
  width: 100vw;
}

—the only thing that happens is a source element gets inserted into the video element. the video doesn't load. it doesn't stretch the video element to fit the container. no new styles are applied to the video element or container. if i put the src directly in the video tag, the video loads but doesn't stretch to fit the container.

If Mobiles Browse, must full screen

Issue when copying your bideo.js file:
Uncaught TypeError: Cannot read property 'addEventListener' of null

Hi Rishabh,

Your library looks great. I also read your article on http://codetheory.in/html5-fullscreen-background-video/

My problem is I am an stupid person. I love to do things as simply / quickly as possible. For the last 30 mins I couldn't figure out how to use your library. Should I caopy-paste the code on your website ?

Just reply to me here in plain, simple english (english is not my first language) and I will write a tutorial / how-to about it. You MAY use if in your readme if you like it. Very Simple.

• Responsive web (mobile) support.
• Support for play/pause buttons (for iOS, etc.).
• Support for Youtube iframe embeds. (Swapping video with YouTube's iframe tag should be good enough. List of options.)

Safari on iOS doesn't support video autoplay. I suggest a cover image fallback.

I try bideo.js on my Aliyun Server（ entry-level），I find that page loads slower.

Hello, noticed bideo can't be found in NPM repository. Can you add it, thanks!