Git List - Executar um vídeo a partir de um click na thumbnail

00-README.md

Executar um vídeo a partir de um click na thumbnail

Códigos referentes ao post Executar um vídeo a partir de um click na thumbnail

functions.php

• add_enqueue_scripts
• add_theme_support
• loop-default.php
• content-video
• script-video.js
• style-video.css
• add_enqueue_video

01-functions-add_enqueue_scripts.php

<?php
  function add_enqueue_scripts() {
    wp_enqueue_script( 'fitvids', get_template_directory_uri() . '/assets/js/jquery.fitvids.js', array(), null, true );
  }
  add_action( 'wp_enqueue_scripts', 'add_enqueue_scripts', 1 );

02-functions-add_theme_support.php

<?php
  /**
   * Add support for Post Formats.
   */
  add_theme_support( 'post-formats', array(
      'video',
      // 'aside',
      // 'gallery',
      // 'link',
      // 'image',
      // 'quote',
      // 'status',
      // 'audio',
      // 'chat'
  ) );

03-loop-default.php

<?php
    if ( have_posts() ) :
      // Start the Loop.
      while ( have_posts() ) : the_post();

        /*
         * Include the post format-specific template for the content. If you want to
         * use this in a child theme, then include a file called called content-___.php
         * (where ___ is the post format) and that will be used instead.
         */
        get_template_part( 'content', get_post_format() );

      endwhile;

      // Post navigation.
      posts_nav_link();

    else :
      // If no content, include the "No posts found" template.
      get_template_part( 'content', 'none' );

    endif;
?>

04-content-video.php

<?php
/**
 * The video content template.
 *
 */
?>
<article id="post-<?php the_ID(); ?>" <?php post_class('loop-videos'); ?>>
	<header class="entry-header">
		<?php
			if ( is_single() ) :
				the_title( '<h1 class="entry-title">', '</h1>' );
			else :
				the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
			endif;
		?>
	</header><!-- .entry-header -->
	<div class="entry-content">
	<?php
		// Apresenta o conteúdo somente dentro da single com o formato de vídeo
		if ( is_single() ) :
		
			the_content();

			// Pega o link do vídeo
			$link_do_video = get_field('link_do_video');
			// Pega o link da imagem personalizada
			$thumbnail_personalizada = get_field('thumbnail_personalizada');

			// Verifica se existe o link cadastrado
			if( !empty( $link_do_video )) : ?>
			<div class="video-featured">
			<?php

				// https://codex.wordpress.org/Function_Reference/wp_oembed_get
				echo wp_oembed_get( $link_do_video );

				// Veririfica se existe a imagem cadastrada
				if( !empty($thumbnail_personalizada)) : ?>
				<button id="play-video" style="background-image: url(<?php echo $thumbnail_personalizada; ?>);">
					<span class="dashicons dashicons-controls-play"></span>
				</button>
				<?php endif; ?>
			</div>

		<?php
			endif;
		// Apresenta o conteúdo na listagem dos post's junto com a função wp_trim_words() limitando em 40 caracteres
		else :
		
			echo wp_trim_words( get_the_content(), 40, '...' );
		
		endif;
	?>
	</div><!-- .entry-content -->
</article><!-- #post-## -->

05-script-video.js

jQuery(document).ready(function($) {

	// Adiciona o fitVids no frame de vídeo dentro da class = video-featured
	$( '.video-featured' ).fitVids();

	// Adiciona o icone de video no título com post-format = video
	$( '.loop-videos .entry-title').prepend('<span class="dashicons dashicons-video-alt"></span> ');

	// Função do click com autoplay
	$('#play-video').on('click', function(event) {
		$('.fluid-width-video-wrapper iframe')[0].src += '&autoplay=1';
		event.preventDefault();
		$(this).fadeOut('slow', function(){
			$(this).remove();
		});
	});
	
});

06-style-video.css

.loop-videos .entry-title{
	display: table;
	vertical-align: middle;
}

.loop-videos .entry-title .dashicons{
	display: table-cell;
	font-size: 33px;
	padding-right: 0.1em;
	vertical-align: middle;
}

.loop-videos .video-featured{
	position: relative;
}

.loop-videos .video-featured > #play-video{
	cursor: pointer;
	position: absolute;
	background-position: top center;
	background-size: cover;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 0;
	border: none;
	z-index: 1;
}


.loop-videos .video-featured > #play-video .dashicons-controls-play{
	display: table;
	font-size: 8em;
	margin: 0 auto;
	position: relative;
	text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);
	color: #333333;
	border-radius: 50%;
	border: 5px solid #333333;
	-moz-transition: all 1s ease-in;
	-webkit-transition: all 1s ease-in;
	-o-transition: all 1s ease-in;
	transition: all 1s ease-in;
}

.loop-videos .video-featured > #play-video:hover .dashicons-controls-play{
	color: #ffffff;
	border-color: #ffffff;
}

07-functions-add_enqueue_video.php

<?php 
    function odin_enqueue_video() {
        // Adiciona Suporte a galeira de icones do proprio WordPress
        wp_enqueue_style( 'dashicons' );
        // Aplicação do Script de Vídeo
        wp_enqueue_script( 'script-video', get_template_directory_uri() . '/assets/js/script-video.js', array(), null, true );
        // Aplicação do Estilo de Vídeo
        wp_enqueue_style( 'style-video', get_template_directory_uri() . '/assets/css/style-video.css', array(), null, 'all' );
    }
    add_action( 'wp_enqueue_scripts', 'odin_enqueue_video', 1 );