Refactor to help creation of a different HTML structure to place the player in mobile

Author: ablazejuk

index.html

@@ -114,7 +114,7 @@ <h2>Musicians' Helper - Repeater</h2>
 
             <!-- Video Player Column -->
             <div class="col-md-6 col-sm-12 text-center">
-                <div id="player-wrapper" class="sticky-top">
+                <div class="sticky">
                     <div id="player" style="display:none"></div>
                 </div>
             </div>

scripts.js

@@ -33,7 +33,7 @@ function onYouTubeIframeAPIReady() {
         playerHeight = 180;
     }
 
-    player = new YT.Player('player', {
+    player = new YT.Player(getPlayerId(), {
         height: playerHeight.toString(),
         width: playerWidth.toString(),
         events: {
@@ -117,7 +117,7 @@ function reset() {
     player.stopVideo();
     $('#duration').val('');
     $('#start').val('');
-    $('#player').hide();
+    getJQueryPlayer().hide();
 }
 
 function processFile(file_contents) {
@@ -182,7 +182,7 @@ $('#video-url').change( function () {
             reset();
             $this.addClass('is-invalid');
         } else {
-            $('#player').show();
+            getJQueryPlayer().show();
             $this.removeClass('is-invalid');
             player.loadVideoById(video_id);
             videoChanged = true;
@@ -290,6 +290,14 @@ function handleFile() {
     reader.readAsText(fileList[0]);
 }
 
+function getPlayerId() {
+    return 'player';
+}
+
+function getJQueryPlayer() {
+    return $('#' + getPlayerId());
+}
+
 $(document).ready(function () {
     bsCustomFileInput.init()
 

styles.css

@@ -107,3 +107,11 @@
         font-size: 2rem;
     }
 }
+
+@media (min-width: 768px) {
+    .sticky {
+        position: sticky;
+        top: 0;
+        z-index: 1030;
+    }
+}