Merge pull request #9 from c0sm1n87/master

video widget

Author: Cosmin

inc/extras.php

@@ -608,18 +608,4 @@ class="mb0 btn btn-lg btn-filled cfa-button">
 		<!--end of container-->
 		</section><?php
 	}
-}
-
-add_action( 'wp_ajax_shapely_get_attachment_image', 'shapely_get_attachment_image' );
-add_action( 'wp_ajax_nopriv_shapely_get_attachment_image', 'shapely_get_attachment_image' );
-
-function shapely_get_attachment_image() {
-	$id  = intval( $_POST['attachment_id'] );
-	$src = wp_get_attachment_image_src( $id, 'full', false );
-
-	if ( ! empty( $src[0] ) ) {
-		echo esc_url( $src[0] );
-	}
-
-	die();
 }

js/shapely-scripts.js

@@ -54,7 +54,7 @@
 			window_w = $(window).width();
 			if ( window_w < 992 ) {
 				cl_nav.removeClass('fixed scrolled outOfSight');
-			} else{
+			} else {
 				window.addEventListener("scroll", updateNav, false);
 				updateNav();
 			}
@@ -160,6 +160,78 @@
 			$(this).attr('data-lightbox', galleryTitle);
 		});
 
+
+		var videos = $('.video-widget');
+		if ( videos.length ) {
+			$.each(videos, function () {
+				var play = $(this).find('.play-button'),
+						pause = $(this).find('.pause-button'),
+						isYoutube = $(this).hasClass('youtube');
+
+				if ( isYoutube ) {
+					var videoId = $(this).attr('data-video-id'),
+							autoplay = parseInt($(this).attr('data-autoplay')),
+							instance = $(this).YTPlayer({
+								fitToBackground: true,
+								videoId        : videoId,
+								playerVars     : {
+									modestbranding: 0,
+									autoplay      : autoplay,
+									controls      : 0,
+									showinfo      : 0,
+									branding      : 0,
+									rel           : 0,
+									autohide      : 0
+								}
+							}),
+							self = $(this);
+
+
+					$(document).on('YTBGREADY', function () {
+						var iframe = self.find('iframe'),
+								height = iframe.height();
+
+						if ( self.height() == 0 ) {
+							self.height(height);
+						}
+					});
+
+
+					$(play).on('click', function (e) {
+						e.preventDefault();
+						var parent = $(this).parents('.video-widget'),
+								instance = $(parent).data('ytPlayer').player;
+						instance.playVideo();
+					});
+
+					$(pause).on('click', function (e) {
+						e.preventDefault();
+						var parent = $(this).parents('.video-widget'),
+								instance = $(parent).data('ytPlayer').player;
+						instance.pauseVideo();
+					});
+
+				} else {
+					$(play).on('click', function (e) {
+						e.preventDefault();
+						var parent = $(this).parents('.video-widget'),
+								instance = $(parent).data('vide'),
+								video = instance.getVideoObject();
+
+						video.play();
+					});
+
+					$(pause).on('click', function (e) {
+						e.preventDefault();
+						var parent = $(this).parents('.video-widget'),
+								instance = $(parent).data('vide'),
+								video = instance.getVideoObject();
+
+						video.pause();
+					});
+				}
+			});
+		}
 	});
 
 	jQuery(window).load(function ($) {
@@ -253,3 +325,4 @@ function testimonialHeight() {
 	jQuery('.testimonial-section .parallax-window').css('height', jQuery('.testimonial-section .parallax-window .container').outerHeight() + 150);
 	jQuery(window).trigger('resize').trigger('scroll');
 }
+

single.php

@@ -32,5 +32,6 @@
 	</div><!-- #primary -->
 
 <?php
+
 get_sidebar();
 get_footer();

style.css

@@ -3184,4 +3184,40 @@ footer.bg-dark a {
 
 #colophon .customize-partial-edit-shortcut button, #colophon .widget .customize-partial-edit-shortcut button, #secondary .customize-partial-edit-shortcut button, #secondary .widget .customize-partial-edit-shortcut button {
     left: -30px !important;
+}
+
+.video-widget {
+    position: relative;
+    overflow: hidden;
+}
+
+.video-widget .video-controls {
+    position: absolute;
+    bottom: 20px;
+    left: 20px;
+}
+
+.video-widget .video-controls button {
+    background: #745cf9;
+    color: #fff;
+    border: none;
+    outline: none;
+    padding: 5px 10px;
+    text-align: center;
+}
+
+.video-widget.youtube {
+    position: relative;
+    background: transparent;
+}
+
+.ytplayer-container {
+    position: absolute;
+    top: 0;
+    z-index: -1;
+}
+
+.shapely_home_parallax {
+    width: 100%;
+    display: inline-block;
 }