Invested Traveler: Video Highlight

Documentation:

Play button image: http://www.raindropdev.com/wp-content/uploads/2017/01/play-btn.png

HTML:

<!-- Video Highlight --> <?php $video = get_field('video_highlight_URL', 'option'); if ($video) { $video_id = str_replace("https://www.youtube.com/watch?v=", "", $video); $content = file_get_contents("http://youtube.com/get_video_info?video_id=".$video_id); parse_str($content, $ytarr); } ?> <div id="video-highlight-section"> <div class="container"> <div class="row"> <div id="video-highlight-container"> <div id="top-graphic"> <img src="<?php echo get_template_directory_uri(); ?>/library/images/invested-traveler/plane.png" /> </div> <div id="video-highlight-section-left" class="video-highlight-section-column"> <div id="video-highlight-video" data-video-id="<?php echo $video_id ?>" data-toggle="modal" data-target="#video-highlight-modal" style="background-image: url('http://img.youtube.com/vi/<?php echo $video_id ?>/hqdefault.jpg')"> <div id="video-highlight-overlay"> </div> </div> </div> <div id="video-highlight-section-right" class="video-highlight-section-column"> <div id="video-highlight-content"> <h2><?php the_field('video_highlight_title', 'option'); ?></h2> <div id="video-highlight-subcontent"> <p><?php the_field('video_highlight_content', 'option'); ?></p> <a href="<?php the_field('video_highlight_button_url', 'option'); ?>"><button class="rd-btn btn-transparent-blue"><?php the_field('video_highlight_button_text', 'option'); ?> <i class="fa fa-caret-right" aria-hidden="true"></i></button></a> </div> </div> </div> </div> </div> </div> </div> <div id="video-highlight-modal" class="modal fade" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <button id="video-highlight-modal-close" type="button" class="close" data-dismiss="modal">&times;</button> <iframe width="100%" height="315" src="" frameborder="0" allowfullscreen></iframe> </div> </div> </div> </div>

CSS:

/* Video Highlight */ #video-highlight-section { float: left; width: 100%; padding: 100px 0; } #video-highlight-container { width: 1000px; height: auto; margin: 0 auto; min-height: 400px; } #video-highlight-section-left { width: 600px; float: left; } #video-highlight-section-right { width: 400px; float: left; } #video-highlight-video { background-color: gray; background-size: cover; background-position: center center; width: 500px; height: 300px; margin: 0 auto; cursor: pointer; } #video-highlight-overlay { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); background-image: url(../images/invested-traveler/play-btn.png); background-position: center center; background-repeat: no-repeat; } #top-graphic { text-align: center; img { width: 500px; } } #video-highlight-content { padding: 50px 30px 30px 30px; h2 { font-family: $header-font-stack; font-size: 44px; margin: 0; color: #008ec4; text-transform: uppercase; letter-spacing: 3px; font-weight: 100; } p { font-family: $body-font-stack; color: #a6a5a7; font-weight: 100; font-style: italic; margin: 10px 0 30px 0; font-size: 15px; letter-spacing: 1px; } button { font-family: $header-font-stack; color: #008ec4; border-color: #008ec4; } } #video-highlight-subcontent { padding-left: 40px; } #video-highlight-modal { .modal-content { margin-top: 60px; } } @media (max-width: 992px) { #top-graphic { display: none; } #video-highlight-container, #video-highlight-video, #video-highlight-section-left, #video-highlight-section-right { width: 100%; } #video-highlight-content { text-align: center; } #video-highlight-subcontent { padding: 0; } }

JS:

// Video Highlight $('#video-highlight-video').on('click', function() { var video_id = $(this).attr('data-video-id'); $('#video-highlight-modal').find('iframe').attr('src', 'https://www.youtube.com/embed/' + video_id + '?autoplay=1'); }); $("#video-highlight-modal").on('hidden.bs.modal', function (e) { $('#video-highlight-modal').find('iframe').attr('src', ''); });

PHP:

function acf_options_add_video_highlight() { if( function_exists('acf_add_local_field_group') ): acf_add_local_field(array ( 'placement' => 'left', 'endpoint' => 0, 'key' => 'field_5879296f58508', 'parent' => 'theme_settings', 'label' => 'Video Highlight', 'name' => '', 'type' => 'tab', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), )); acf_add_local_field(array ( 'default_value' => '', 'maxlength' => '', 'placeholder' => '', 'prepend' => '', 'append' => '', 'key' => 'field_5879297a58509', 'parent' => 'theme_settings', 'label' => 'Video Highlight URL', 'name' => 'video_highlight_URL', 'type' => 'text', 'instructions' => 'Paste the full YouTube URL into this field.', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), )); acf_add_local_field(array ( 'default_value' => '', 'maxlength' => '', 'placeholder' => '', 'prepend' => '', 'append' => '', 'key' => 'field_588373919a4aa', 'parent' => 'theme_settings', 'label' => 'Video Highlight Title', 'name' => 'video_highlight_title', 'type' => 'text', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), )); acf_add_local_field(array ( 'default_value' => '', 'maxlength' => '', 'placeholder' => '', 'prepend' => '', 'append' => '', 'key' => 'field_588373a39a4ab', 'parent' => 'theme_settings', 'label' => 'Video Highlight Content', 'name' => 'video_highlight_content', 'type' => 'text', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), )); acf_add_local_field(array ( 'default_value' => '', 'maxlength' => '', 'placeholder' => '', 'prepend' => '', 'append' => '', 'key' => 'field_588373b29a4ac', 'parent' => 'theme_settings', 'label' => 'Video Highlight Button Text', 'name' => 'video_highlight_button_text', 'type' => 'text', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), )); acf_add_local_field(array ( 'default_value' => '', 'maxlength' => '', 'placeholder' => '', 'prepend' => '', 'append' => '', 'key' => 'field_588373be9a4ad', 'parent' => 'theme_settings', 'label' => 'Video Highlight Button URL', 'name' => 'video_highlight_button_url', 'type' => 'text', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), )); endif; } add_action( 'acf/init', 'acf_options_add_video_highlight' );