diff --git a/public/page/home/Homepage.jsx b/public/page/home/Homepage.jsx
index 2a912e5..e26c6ab 100644
--- a/public/page/home/Homepage.jsx
+++ b/public/page/home/Homepage.jsx
@@ -24,6 +24,7 @@
import React from 'react';
import Page from './../Page';
import VideoSection from './../../section/video/VideoSection';
+import Section from './../../section/Section';
class Homepage extends React.Component {
constructor(props) {
@@ -36,6 +37,10 @@ class Homepage extends React.Component {
Test
+
+
);
}
diff --git a/public/section/video/VideoSection.jsx b/public/section/video/VideoSection.jsx
index e0c0d02..16e78d6 100644
--- a/public/section/video/VideoSection.jsx
+++ b/public/section/video/VideoSection.jsx
@@ -37,6 +37,8 @@ class VideoSection extends React.Component {
className="c-video-section__video"
autoPlay
loop
+ fill
+ sources={ this.props.sources ? this.props.sources : this.props }
/>
{ this.props.children }
diff --git a/public/styles/objects/_video.scss b/public/styles/objects/_video.scss
index fc10eb8..6fd2762 100644
--- a/public/styles/objects/_video.scss
+++ b/public/styles/objects/_video.scss
@@ -2,7 +2,7 @@
* Video
* Video Object, with general fallbacks and smarter controls for better
* cross-browser compatibility.
- *
+ *
* Also allows for better and more styled controls.
*
* Dependencies:
@@ -11,8 +11,17 @@
* 1.0.0 - 2018/05/07
*/
.o-video {
+ position: relative;
&__video {
+ &.is-full {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ object-fit:cover;
+ }
}
}
diff --git a/public/video/Video.jsx b/public/video/Video.jsx
index 0f402e6..3bdbb1a 100644
--- a/public/video/Video.jsx
+++ b/public/video/Video.jsx
@@ -23,9 +23,10 @@
import React from 'react';
+//Adjust the order to adjust the load position
const VALID_SOURCES = [
- "mp4",
"webm",
+ "mp4",
"ogg"
]
@@ -37,6 +38,8 @@ class Video extends React.Component {
render() {
//TODO: Add image fallback support.
//TODO: Add state support, as well as functional controls.
+
+ //Sources
let sources = [];
let sourceProps = this.props.sources ? this.props.sources : this.props;
@@ -46,6 +49,7 @@ class Video extends React.Component {
sources.push();
}
+ //Classes
let clazz = "o-video";
if(this.props.className) clazz += " " + this.props.className;
if(sourceProps.image) clazz += " has-image";
@@ -53,19 +57,27 @@ class Video extends React.Component {
if(this.props.autoplay) clazz += " is-autoplaying";
if(this.props.loop) clazz += " is-looping";
+ let videoClass = "o-video__video";
+ if(this.props.fill) videoClass += " is-full";
+
+
+ //Fallback.
+ let fallback;
+
return (
-
+
{ /* Video Element (And sources) */ }
-
);
}