matthojo/videojs-background

Allows for videos to be displayed as a full background to any element.

videojs-background's Issues

Does not display background <div> in Fullscreen mode (see jsbin example)

http://jsbin.com/vigatep/edit?html,output

Should it work in Fullscreen mode, if not, can you explain why not?

publish to npm?

Hey could you publish this to npm? Would appreciate greatly!

Bower?

Can you please register this repo in bower?

Use this library with 'videojs-vimeo'

I'm tried getting your lib to play nicely with the Vimeo plugin. And I somehow hacked it to work (just for vimeo, ofcourse), maybe you'd like to have a look to see if you can add my changes to your lib (and still keep it compatible, which I didn't, sorry).

Window width vs element width

There's an issue with lines 89 & 90 that relates to iOS. As the calculations are based off the window dimensions, this is not always ideal as when you scroll down on iOS, the Mobile Safari url bar shrinks in height, which affects the window dimensions, thus causing the image to adjust accordingly.

Simply removing the conditionals on those two lines resolves the issue, however I'm not sure how this may affect usage of this plugin under other circumstances for others.

var containerW = settings.container.clientWidth,
  containerH = settings.container.clientHeight,

Problem Uncaught TypeError: Cannot read property 'appendChild' of undefined

I can't init the script, error on line 61 in vjs Background.
I put script and code at the end and header, but doesn't work.

Same error.

import 'videojs-background';

I'd like you use your lib in my (browserify) project I tried adding this (http://ifandelse.com/its-not-hard-making-your-library-support-amd-and-commonjs/) to your project, but this is all still new to me and I can't get it to work...

Would you mind having a stab at it?

video.js controls

Hi.
Is it possible to use video.js control bar when using videojs-Background? Because they are not visible. Probably due to screen resolution?
Thanks

How to import ?

I'm trying to use videojs with yarn, es6 and all the modern tools.

videojs works fine, but videojs-background doesn't

This code gives me error "TypeError: videojs is undefined"

import videojs from "video.js"
import "videojs-background/lib/videojs-Background.js"
export default {
  init() {
    videojs("bg-video").Background(); 
  }, 
};

I read the code and it seems that videojs-Background depends on window.videojs to exist.
But in this example, videojs is a local variable.

I tried to apply the variable to window with no success:

import videojs from "video.js";
import "videojs-background/lib/videojs-Background.js";
export default {
  init() {
    window.videojs = videojs;
    window.videojs("bg-video").Background();
  },
};

how to make it work?

Element position or Background (video position)

Hello!

After solving the other issue, I had new one...
I need to positioning the element with the video BG after some divs, but the Background does't start at the top of the video file.

How can i positioning the video in the background to add some offsets or something?

Any ideas?

The element or ID supplied is not valid

Hi.
I could not get it working. I am getting this error 'The element or ID supplied is not valid. (videojs)'.
Calling 'videojs('bg-video').Background();'.
Can you help me on this?
Thanks.
video.js 4.12.11

When resizing the browser vertically the player may never recover its original size

Hi!

First of all, thanks for the wonderful project which allows to build websites with video.js with amazing results!

One thing that its not working for me: when resizing the browser vertically, the player object size is not correct in some circumstances.

I'll try to explain more in detail: I'm loading a 16:9 aspect ratio video in a video.js and sending the video to the background. Even in a 5:4 monitor, it loads correctly, showing the video in the entire browser (cropping on the edges, of course). If I change the browser size horizontally, from 5:4 (1.25) to 16:9 (1.77) and even to 5:2 (2.50) aspect ratios, forward and backward (and scaling to 1:4 also, resizing the window), it scales perfectly, filling completely the web browser window.

When I do this vertically, increasing or reducing the aspect ratio from 16:9 (1.77) to 5:4 (1.25) its also okey. But, at last, when I change the browser window reducing the vertical size, changing the A/R from 16:9 to 16:7 (more or less), for example, when I recover the 16:9 size it is okey, but if I change the A/R to 5:4 the bottom on the browser is in blank and not covered with the video object.

In short, reducing vertically a 16:9 video to a smaller vertical size, preserving the horizontal size, it prevents the video from adjusting to bigger browser vertical sizes than 16:9.

I've tried looking at the updateSize function, responsible for this, but I cannot detect what's happening! For me it seems that the browser is ignoring some operations in this function :-(

Thanks in advance for your help!

Best regards,

Javier

Mobile issues

Hi.
I am using your Background plugin with Youtube and Vimeo plugins.
On desktop devices i manage to get all working together, but with mobile devices i am struggling with some issues.
I could only test with Android with native and chrome browsers.
If i don't use your plugin all video types are working in both browsers, obviously not in full screen :). With your plugin, i only get it working with chrome with mp4 and Vimeo videos, but not with Youtube. With the native Android browser only partially mp4 worked, i say partially because it worked but not in full screen.
Can you please give me some guidance?

videojs Options not working

I'm trying to disable autoplay, but videojs-Background seems to ignore the options object:

videojs('bg-video',{
    "autoplay": false,
    "preload": false
}).Background();

Am I missing something?

fire up plugin

Sorry this questions but i'm newbie on video.js.
Is it possible to initialise videojs-Background plugin inside data-setup={} ?
Thanks