Make in/out effect easier to change + css changes to support fadeing

index.html

@@ -11,6 +11,7 @@
         * {padding: 0;margin: 0;} /* Not necessary when using frameworks */
 
         .player {
+            position: relative;
             width: 70vw;
             margin: 0 auto;
         }
@@ -19,10 +20,14 @@
            Note that the > restricts the img to be on the root level of .player
         */
         .player > img.thumb {
+            position: absolute;
+            z-index: 1;
             width: 100%;
         }
 
         .player > iframe {
+            position: absolute;
+            z-index: -1;
             width: 100%;
             height: 100%;
         }
@@ -50,7 +55,7 @@
         <div class="player">
             <img class="thumb" src="./thumb.png" alt="Thumbnail" />
             <div class="something wf realated classed and shit">
-            <iframe src="https://www.youtube-nocookie.com/embed/dcsvMySGmS8?enablejsapi=1" frameborder="0" allow="autoplay; encrypted-media; gyroscope" allowfullscreen></iframe>
+            <iframe src="https://www.youtube-nocookie.com/embed/dcsvMySGmS8?enablejsapi=1&rel=0" frameborder="0" allow="autoplay; encrypted-media; gyroscope" allowfullscreen></iframe>
             </div>
         </div>
 
@@ -82,14 +87,19 @@
                 // Store all instances of «Youtube Players»
                 var ytp = [];
 
+                // Change effect on IN and OUT here.
+                // Will affect on both «playerOpen» and «playerClose»
+                $.fn.outEffect = $.fn.fadeOut;
+                $.fn.inEffect = $.fn.fadeIn;
+
                 // When a player opens
                 var playerOpen = function (i, player) {
                     if (!ytp[i])
                         return;
 
                     // Remove thumb and show iframe
-                    player.find('.thumb').slideUp();
-                    player.find('iframe').slideDown({
+                    player.find('.thumb').outEffect();
+                    player.find('iframe').inEffect({
                         complete: function () {
                             // When fully opened, plat video and change cursor
                             ytp[i].playVideo()
@@ -113,8 +123,8 @@
                     ytp[i].stopVideo();
 
                     // Hide iframe and show thumg
-                    player.find('iframe').slideUp()
-                    player.find('.thumb').slideDown(function() {
+                    player.find('iframe').outEffect()
+                    player.find('.thumb').inEffect(function() {
                         player.removeClass('stop loading').addClass('play');
                     });
                 }
@@ -131,6 +141,11 @@
                     if (hidden)
                         thumb.show();
 
+                    player.css({
+                        height: thumb.height(),
+                        width: thumb.width(),
+                    });
+
                     // Adopt the size of the thumbnail to the iframe
                     ytvid.css({
                         height: thumb.height(),