first push prod

web/app/themes/la_mine/functions.php

@@ -40,6 +40,11 @@
 	}
 	add_action( 'wp_footer', 'rellax' );
 
+	function simplePlayer(){
+			wp_enqueue_script( 'script',
+			get_template_directory_uri() . '/src/assets/js/simplePlayer.js', array() );
+	}
+	add_action( 'wp_footer', 'simplePlayer' );
 
 	function customJs(){
 		wp_enqueue_script( 'script',

web/app/themes/la_mine/src/assets/js/scripts.js

@@ -125,104 +125,39 @@ function scrollto(){
   });
 }
 
-function callPlayer(frame_id, func, args) {
+// function setupPlayers() {
-  
+//   // $('#section_MineVideo .cover').click(function(){
-  if (window.jQuery && frame_id instanceof jQuery) frame_id = frame_id.get(0).id;
+//   //   $(this).fadeOut();
-  var iframe = document.getElementById(frame_id);
+//   //   var id = $(this).parent().find('iframe').attr('id');
-  if (iframe && iframe.tagName.toUpperCase() != 'IFRAME') {
+//   //   callPlayer(id, function() {
-      iframe = iframe.getElementsByTagName('iframe')[0];
+//   //     callPlayer(id, "playVideo");
-  }
+//   //   });
-  // When the player is not ready yet, add the event to a queue
+//   // });
-  // Each frame_id is associated with an own queue.
+//   // Load the IFrame Player API code asynchronously.
-  // Each queue has three possible states:
+//   var tag = document.createElement('script');
-  //  undefined = uninitialised / array = queue / .ready=true = ready
+//   tag.src = "https://www.youtube.com/player_api";
-
+//   var firstScriptTag = document.getElementsByTagName('script')[0];
-  console.log('domReady',iframe);
+//   firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
-
+//
-  if (!callPlayer.queue) callPlayer.queue = {};
+//   // Replace the 'ytplayer' element with an <iframe> and
-  var queue = callPlayer.queue[frame_id],
+//   // YouTube player after the API code downloads.
-      domReady = document.readyState == 'complete';
+//   var player;
-  if (domReady && !iframe) {
+//   function onYouTubePlayerAPIReady() {
-      // DOM is ready and iframe does not exist. Log a message
+//     console.log('cc');
-      window.console && console.log('callPlayer: Frame not found; id=' + frame_id);
+//     player = new YT.Player('ytplayer', {
-      if (queue) clearInterval(queue.poller);
+//       height: '360',
-  } else if (func === 'listening') {
+//       width: '640',
-      // Sending the "listener" message to the frame, to request status updates
+//       videoId: 'XUsBV5mXJGs'
-      if (iframe && iframe.contentWindow) {
+//     });
-          func = '{"event":"listening","id":' + JSON.stringify(''+frame_id) + '}';
+//   }
-          iframe.contentWindow.postMessage(func, '*');
+// }
-      }
-  } else if ((!queue || !queue.ready) && (
-             !domReady ||
-             iframe && !iframe.contentWindow ||
-             typeof func === 'function')) {
-      if (!queue) queue = callPlayer.queue[frame_id] = [];
-      queue.push([func, args]);
-      if (!('poller' in queue)) {
-          // keep polling until the document and frame is ready
-          queue.poller = setInterval(function() {
-              callPlayer(frame_id, 'listening');
-          }, 250);
-          // Add a global "message" event listener, to catch status updates:
-          messageEvent(1, function runOnceReady(e) {
-              if (!iframe) {
-                  iframe = document.getElementById(frame_id);
-                  if (!iframe) return;
-                  if (iframe.tagName.toUpperCase() != 'IFRAME') {
-                      iframe = iframe.getElementsByTagName('iframe')[0];
-                      if (!iframe) return;
-                  }
-              }
-              if (e.source === iframe.contentWindow) {
-                  // Assume that the player is ready if we receive a
-                  // message from the iframe
-                  clearInterval(queue.poller);
-                  queue.ready = true;
-                  messageEvent(0, runOnceReady);
-                  // .. and release the queue:
-                  while (tmp = queue.shift()) {
-                      callPlayer(frame_id, tmp[0], tmp[1]);
-                  }
-              }
-          }, false);
-      }
-  } else if (iframe && iframe.contentWindow) {
-      // When a function is supplied, just call it (like "onYouTubePlayerReady")
-      if (func.call) return func();
-      // Frame exists, send message
-      iframe.contentWindow.postMessage(JSON.stringify({
-          "event": "command",
-          "func": func,
-          "args": args || [],
-          "id": frame_id
-      }), "*");
-  }
-  function messageEvent(add, listener) {
-    var w3 = add ? window.addEventListener : window.removeEventListener;
-    w3 ?
-        w3('message', listener, !1)
-    :
-        (add ? window.attachEvent : window.detachEvent)('onmessage', listener);
-  }
-}
-
-
-function setupPlayers() {
-  $('#section_MineVideo .cover').click(function(){
-    $(this).fadeOut();
-    var id = $(this).parent().find('iframe').attr('id');
-    callPlayer(id, function() {
-      callPlayer(id, "playVideo");
-    });
-  });
-}
 
 $( document ).ready(function() {
+  // setupPlayers();
   burger();
   click_nav();
   slides();
   isotope();
-  setupPlayers();
   // custom_player();
   // masonry();
   paralax();

web/app/themes/la_mine/src/assets/js/simplePlayer.js

@@ -0,0 +1,82 @@
+
+var YTdeferred = jQuery.Deferred();
+
+window.onYouTubeIframeAPIReady = function() {
+	YTdeferred.resolve(window.YT);
+};
+
+(function( $ ) {
+
+	$.ajaxSetup({
+		cache: true
+	});
+
+	$.getScript( "https://www.youtube.com/iframe_api")
+		.done(function( script, textStatus ) {
+	});
+
+	$.fn.simplePlayer = function() {
+
+		var	video = $(this);
+
+		var play = $('<div />', { id: 'play' }).hide();
+
+		var defaults = {
+				autoplay: 1,
+				autohide: 1,
+				border: 0,
+				wmode: 'opaque',
+				enablejsapi: 1,
+				modestbranding: 1,
+				version: 3,
+				hl: 'en_US',
+				rel: 0,
+				showinfo: 0,
+				hd: 1,
+				iv_load_policy: 3 // add origin
+			};
+
+		// onYouTubeIframeAPIReady
+
+		YTdeferred.done(function(YT) {
+			play.appendTo( video ).fadeIn('slow');
+		});
+
+		function onPlayerStateChange(event) {
+			if (event.data == YT.PlayerState.ENDED) {
+				play.fadeIn(500);
+			}
+		}
+
+		function onPlayerReady(event) {
+			var replay = document.getElementById('play');
+			replay.addEventListener('click', function() {
+				player.playVideo();
+			});
+		}
+
+		play.bind('click', function () {
+
+			if ( !$('#player' ).length ) {
+
+				$('<iframe />', {
+					id: 'player',
+					src: 'https://www.youtube.com/embed/' + video.data('video') + '?' + $.param(defaults)
+				})
+				.attr({ width: video.width(), height: video.height(), seamless: 'seamless' })
+				.css('border', 'none')
+				.appendTo( video );
+
+				video.children('img').hide();
+
+				$(this).css('background-image', 'url(play-button.png), url(' + video.children().attr('src') + ')').hide();
+	
+				player = new YT.Player('player', {events: {'onStateChange': onPlayerStateChange, 'onReady': onPlayerReady}});
+			}
+
+			$(this).hide();
+		});
+
+		return this;
+	};
+}( jQuery ));

web/app/themes/la_mine/templates/accueil.twig

@@ -47,11 +47,12 @@
 		<h3>Transition urbaine</h3>
 		{% if post.video_la_mine  %}
 			<figure class="row mx-0">
-				<div class="cover">
+				{# <div class="cover">
 					<img id="thumbnails" src="http://img.youtube.com/vi/XUsBV5mXJGs/maxresdefault.jpg" alt="thumbnail">
 					<img id="player" src="{{theme.link}}/dist/assets/images/player.svg" alt="player">
-				</div>
+				</div> #}
-				<iframe id="playVideo" src="https://www.youtube.com/embed/XUsBV5mXJGs?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
+				<div id="ytplayer"></div>
+				{# <iframe id="playVideo" src="https://www.youtube.com/embed/XUsBV5mXJGs?enablejsapi=1" frameborder="0" allowfullscreen></iframe> #}
 			</figure>
 		{% endif %}
 	</div>

web/app/themes/la_mine/templates/components/thumbnails/thumbnails.twig

@@ -47,9 +47,6 @@
           <div class="places">{{item.informations_lieu}}</div>
         </div>
       </figcaption>
-
-
     </figure>
-
   </a>
 </article>