Merge pull request #45 from kleinpetr/master

Add object-position / bg-position props

README.md

@@ -36,7 +36,7 @@
 ```
 ### 2b: Install as a plugin 
 ```javascript
- import { Plugin } from 'vue-responsive-video-background-player'
+ import { Plugin } from 'vue-responsive-video-background-player'
 
  Vue.use(Plugin);
 ```
@@ -166,6 +166,18 @@ https://www.w3schools.com/tags/att_video_preload.asp
 
 So the video fits perfectly in the container
 
+- `objectPosition` (default: `center`)
+
+So the video fits exact position in the container
+
+> the value is also used as a poster background-position 
+
+- `posterBgSize` (default: `cover`)
+
+So the poster fits perfectly in the container
+
+> Using the same values for `objectFit` and `posterBgSize` is recommended
+
 - `playsWhen` (default: `canplay`)
 
 This is important, if you know that you might have users with bad internet speed, you should definetly use `canplaythrough`. Learn more in [video events](https://www.w3schools.com/tags/ref_av_dom.asp).

src/VideoBackground.vue

@@ -6,6 +6,8 @@
         <video-poster
             v-if="current.poster || poster"
             :poster="current.poster || poster"
+            :background-size="posterBgSize"
+            :background-position="objectPosition"
         />
 
         <video-player
@@ -18,6 +20,7 @@
             :playback-rate="playbackRate"
             :transition="transition"
             :object-fit="objectFit"
+            :object-position="objectPosition"
             @ready="playVideo"
             @playing="$emit('playing')"
             @paused="$emit('paused')"

src/components/VideoPlayer.vue

@@ -35,11 +35,12 @@ export default {
     },
     computed: {
         styleObject() {
-            if (!this.objectFit) {
+            if (!this.objectFit && !this.objectPosition) {
                 return {};
             }
             return {
                 objectFit: this.objectFit,
+                objectPosition: this.objectPosition,
             };
         },
     },

src/components/VideoPoster.vue

@@ -12,11 +12,21 @@ export default {
             type: String,
             required: true,
         },
+        backgroundSize: {
+            type: String,
+            default: 'cover',
+        },
+        backgroundPosition: {
+            type: String,
+            default: 'center',
+        },
     },
     computed: {
         image() {
             return {
                 backgroundImage: `url(${this.poster})`,
+                backgroundSize: this.backgroundSize,
+                backgroundPosition: this.backgroundPosition,
             };
         },
     },
@@ -27,8 +37,6 @@ export default {
     .video-buffering{
         width: 100%;
         overflow: hidden;
-        background-size: cover;
-        background-position: center;
         height: 100%;
         top: 0;
         left: 0;

src/core/playerProps.js

@@ -19,6 +19,14 @@ export default {
         type: String,
         default: 'cover',
     },
+    posterBgSize: {
+        type: String,
+        default: 'cover',
+    },
+    objectPosition: {
+        type: String,
+        default: 'center',
+    },
     playsWhen: {
         type: String,
         default: 'canplay',