pespantelis / vue-videobg Goto Github PK

Rewrite your html classes to 'video-background' and the Video__content to just 'content'. Content is already nested, no need to prefix it.

See also: https://css-tricks.com/semantic-class-names/

Nice component.

I found a bug in this component, when it is used with NUXT.

An error occurs in the "Unspected '<' nuxt
when verifying the implementation of the template I identified that the 'v-for' in line 4 was not defined: key and somehow this made the component give this bug.

Adjustment request:
Add in line 4 inside the source tag o: key

There is a compatibility issue with Nuxt.js that I don't completely understand.

The workaround is to whitelist this component in ssr mode.

Usually you want to reduce the pageload on mobile devices. On top of that the user's viewport probably isn't 16:9 on a smartphone.

It would be great if you could specify a second image that will be displayed instead of the video on smaller viewports and a property to define the minimum width in pixels for the desktop behaviour.

How to make the video fadeout after it has finished then start again ?

Hi,

How can we loop on many videos ?
sources="['media/video-2.mp4', 'media/video-3.mp4']
This is not working, the first video is looping and we can't see the second.

regards

After running the generate command the video loses its condition as background

meaning when it gets to the end, instead of looping back to the beginning.. it actually plays the video in reverse.. and so on

It seems that demo still doesn't work in Chromium Version 68.0.3440.106 (Official Build) Built on Ubuntu , running on LinuxMint 19 (64-bit)

When to update to support vue2.0?

Hi. Demo is not working for me. Ubuntu, Chromium.

Hi, the components looks great!
Thanks to publish it!

I don't not why but I'm having a problem:

gulp-notify: [Laravel Elixir] Browserify Failed!: Unexpected token

.../node_modules/vue-videobg/src/VideoBackground.vue:1
<template>
^
ParseError: Unexpected token

If I copy the component outside of the package of node_modules folder it's working...

How to use it with laravel 5.4?

Hi, great component! However, I'm having some difficulty getting the component to load both the image and the video.

I'm using the build system so *.vue files and the yarn build for production. However I'm testing under hot deploy.

Folder structure:

[src]
----/assets
----/components etc.

To access a regular image, this works:
<img style="height: 4.32em; padding-bottom: 0.8em;" src="../assets/client.png" alt="logo">

However, when I pass the same paramters to video-bg, I get 404 errors on both the video and image.
My code is like this:

<video-bg :sources="['../assets/bg-video.mp4']" img="../assets/bg-image.png" />

I've tried all sorts of variants. I suspect because it's the video-bg component stored in a different subdirectory (node_modules) the relative reference is breaking. I just don't want to have such hack to have fixed paths to your component, since that might change in the future.

I've also tried: '~/assets...' and '@/assets...' and '/assets...' all fail with a 404.

Any pointers would be greatly appreciated. Thanks

Dear colleague,

The current release of vue-videobg can't play video over iOS devices (any browser over iPhone or iPad)

In order to get videos played properly over the Apple devices, the option 'playsinline' must be included in the video tag.

Thus, the code of video tag would be as follows:

<video autoplay loop muted playsinline ref="video">

We have succesfully tested this change over iphone 5,6,X,XS, iPad & iPad Pro.

Kind regards

Pedro

Make sure you add playsinline attribute or else it won't autoplay.