|
@@ -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(),
|