Setup optional title for default theme

src/functions/AutoToggleControls.js

@@ -3,7 +3,7 @@ import { VideoContainer, VideoControls, ZornVideoPlayer } from '../get'
 
 export function AutoToggleControls() {
     function Hide_Controls() {
-        var ZornTitleArea = document.querySelector(".video-container > h2")
+        var ZornTitleArea = document.querySelector(".zorn-title")
         if (ZornVideoPlayer.paused) {
             return
         } else {
@@ -14,7 +14,7 @@ export function AutoToggleControls() {
     
     // Show_Controls displays the video controls
     function Show_Controls() {
-        var ZornTitleArea = document.querySelector(".video-container > h2")
+        var ZornTitleArea = document.querySelector(".zorn-title")
         document.querySelector('.zorn-player-controls').classList.remove('hide')
         ZornTitleArea.classList.remove('hide')
     }

src/index.js

@@ -1,5 +1,5 @@
 import { ZornVideoPlayer } from "./get"
-import { Controls } from "./themes/default"
+import { Controls, Title } from "./themes/default"
 
 // Import Functions
 import { Events } from './events'
@@ -17,6 +17,10 @@ import { KeyboardShortcuts } from "./functions/KeyboardShortcuts"
 ZornVideoPlayer.insertAdjacentHTML("afterend", Controls)
 ZornVideoPlayer.insertAdjacentHTML("afterend", BufferDialog)
 
+if (ZornVideoPlayer.getAttribute('layout') === 'default') {
+    Title()
+}
+
 // Init Functions
 Events()
 KeyboardShortcuts()

src/themes/default.js

@@ -1,13 +1,25 @@
 import {
     PlayIcon,
-    PauseIcon,
     FullcreenIcon,
     CaptionsIcon,
     Backward15Icon,
     Forward15Icon,
-    VolumeHighIcon
+    VolumeHighIcon,
+    ZornVideoPlayer
 } from '../get'
 
+
+// This theme includes an optional title
+export function Title() {
+    let VideoTitle = ZornVideoPlayer.getAttribute('video-title')
+    document.querySelector(".zorn-title").innerHTML = VideoTitle
+    if (ZornVideoPlayer.hasAttribute('video-title')) {
+        document.querySelector('.zorn-title').style.display = 'inherit'
+    } else {
+        document.querySelector('.zorn-title').style.display = 'none'
+    }
+}
+
 export var Controls = `
 <h2 class="zorn-title hide"></h2>
 <div oncontextmenu="return false" class="zorn-player-controls">
@@ -109,10 +121,9 @@ export var Controls = `
     display: inline-flex;
 }
 .video-container .zorn-title {
-    display: none;
     position: absolute;
     top: 0px;
-    background: #000;
+    background: rgb(0 0 0 / 50%);
     width: auto;
     margin: 12px;
     padding: 12px 24px;