Instantly share code, notes, and snippets.

Embed
What would you like to do?
Git List - Executar um vídeo a partir de um click na thumbnail
<?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 );
<?php
/**
* Add support for Post Formats.
*/
add_theme_support( 'post-formats', array(
'video',
// 'aside',
// 'gallery',
// 'link',
// 'image',
// 'quote',
// 'status',
// 'audio',
// 'chat'
) );
<?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;
?>
<?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-## -->
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();
});
});
});
.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;
}
<?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 );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment