//HTML
// getVimeoId($vleft['video']) = url do filmu vimeo

<div class="bottom__img">
	<iframe src="https://player.vimeo.com/video/<?php echo getVimeoId($vleft['video']); ?>?&autoplay=0&loop=0&muted=1&title=0&byline=0&portrait=0&fun=0&background=1" frameborder="0" allowfullscreen></iframe>
  <button class="play btn btn-transparent btn-rounded-inverse-mini" data-scrollinit="click">
      <svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 7L3.01142e-07 13.9282L9.06825e-07 0.0717964L12 7Z" fill="#F2FF00"/>
      </svg>
  </button>
  <button class="stop btn btn-transparent btn-rounded-inverse-mini">
      <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.000244141 0.714355H2.28607V13.8572H0.000244141V0.714355Z" fill="#F2FF00"/>
          <path d="M5.71413 0.714111H7.99995V13.8572H5.71413V0.714111Z" fill="#F2FF00"/>
      </svg>
  </button>
</div>


//SCSS
.bottom__img {
	height: 0;
	width: 100%;
	padding-top: 74%;
	position: relative;

	iframe,
	img {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.play,
	.stop {
		position: absolute;
		right: 26px;
		bottom: calc(17.75% + 26px);

		&:hover {
			svg {
				path {
					fill: #000000;
				}
			}
		}

		&.stop {
			//display: none;
		}

		&.play {
			display: none;

			svg {
				margin-left: 2px;
			}
		}
	}
}

//JS
//need magicscroll

(function ($) {
	jQuery(window).on('load', function () {
		var localization = $('.bottom__img');
		var moduleIframe = $(localization).find('iframe');
		if (moduleIframe.length) {
			var player = new Vimeo.Player($(localization).find('iframe'));
			var playBtn = $(localization).find('.play');
			var stopBtn = $(localization).find('.stop');
			console.log(stopBtn);

			/* controls */
			playBtn.on('click', function (e) {
				e.stopPropagation();
				player.play();
			})
			stopBtn.on('click', function () {
				player.pause();
			})

			player.on('play', function () {
				stopBtn.show();
				playBtn.hide();
			});
			player.on('pause', function () {
				stopBtn.hide();
				playBtn.show();
			});
		}

		var autoPlay = new ScrollMagic.Controller();

		jQuery('.bottom__img *[data-scrollinit]').each(function () {
			var animation = jQuery(this).attr('data-scrollinit');

			var scene = new ScrollMagic.Scene({
				triggerElement: this,
				triggerHook: 'onEnter',
				offset: 100,
				reverse: false
			}).on('start', function (element) {
				player.play();

			})
				.addTo(autoPlay);
		});
	});
})(jQuery);



//if you have 2 videos you can play 2nd after finished first:
//playerLeft.on('ended', function () {
//	playerRight.play();
//});
// ex. zmorph3d - page product i500