Added video-title

public/components/title/VideoTitle.jsx

@@ -0,0 +1,49 @@
+/*
+ *  Video Title
+ *    Video title.
+ *
+ *  Dependencies:
+ *    styles/components/_video-title.scss
+ *
+ *  Version:
+ *    1.0.0 - 2018/03/18
+ */
+import React from 'react';
+import { connect } from 'react-redux';
+import { Link, NavLink } from 'react-router-dom';
+
+import Language from './../../language/Language';
+
+const VideoTitle = function(props) {
+  let children = ([
+    <video autoPlay className="o-video-title__video" loop key="video">
+      <source src={ props.mp4 } type="video/mp4" />
+    </video>,
+    <h2 className="o-video-title__heading" key="title">
+      { Language.get(props.title) }
+    </h2>
+  ]);
+
+  let clazz = "o-video-title";
+
+  if(props.to) {
+    return (
+      <NavLink to={props.to} exact activeClassName="active" className={clazz}>
+        {children}
+      </NavLink>
+    );
+  }
+
+  return (
+    <div className={clazz}>
+      {children}
+    </div>
+  );
+}
+
+const mapStateToProps = function(state) {
+  return {
+    code: state.language.code
+  }
+}
+export default connect(mapStateToProps)(VideoTitle);

public/styles/objects/_video-title.scss

@@ -0,0 +1,47 @@
+/*
+ *  Video Title
+ *    Video title.
+ *
+ *  Dependencies:
+ *    styles/settings/responsive.scss
+ *    styles/tools/_responsive.scss
+ *    styles/tools/_mixin.absolute-centering.scss
+ *
+ *  Version:
+ *    1.0.0 - 2018/03/18
+ */
+.o-video-title {
+  width: 100%;
+  position: relative;
+  line-height: 0;
+  display: block;
+}
+
+.o-video-title__video {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position:  center;
+}
+
+.o-video-title__heading {
+  color: white;
+  z-index: 10;
+  position: relative;
+  margin: 0;
+  padding: 2em 0.5em;
+  font-size: 2em;
+}
+
+@include t-media-query($s-xsmall-up) {
+  .o-video-title__video {
+    position: relative;
+  }
+
+  .o-video-title__heading {
+    @include t-absolute-center-y();
+    left: 5%;
+    padding: 0;
+  }
+}