SDCCS: Video Highlight

Documentation:

HTML:

<!-- Video Highlight --> <?php $video = get_field('video_highlight_URL', 'option'); if ($video) { if (strpos($video, 'vimeo') !== false) { $video_id = str_replace("https://vimeo.com/", "", $video); $video_type = 'vimeo'; } else { $video_id = str_replace("https://www.youtube.com/watch?v=", "", $video); $video_type = 'youtube'; } } ?> <div id="video-highlight-section"> <div class="container"> <div class="row"> <div id="video-highlight-container"> <div id="video-highlight-section-left" class="video-highlight-section-column"> <div id="video-highlight-video" data-video-id="<?php echo $video_id ?>" data-video-type="<?php echo $video_type ?>" data-toggle="modal" data-target="#video-highlight-modal"> <video id="video-highlight-preview" loop autoplay> <source src="<?php the_field('video_highlight_preview', 'option'); ?>" type="video/mp4"> </video> <div id="video-highlight-overlay" style="background-image: url(<?php echo get_template_directory_uri(); ?>/library/images/play-btn.png);"> </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"><?php the_field('video_highlight_button_text', 'option'); ?></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: 50px 0; background: linear-gradient($primary-color 50%, #fff 50%); text-align: center; } #video-highlight-container { width: 960px; height: auto; margin: 0 auto; padding-top: 20px; background-color: #f9f9f9; display: inline-block; } #video-highlight-section-left { width: 540px; float: left; } #video-highlight-section-right { width: 420px; text-align: left; float: left; } #video-highlight-video { background-color: gray; background-size: cover; background-position: center center; width: 500px; height: 300px; margin: 0 auto; cursor: pointer; position: relative; } #video-highlight-preview { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; } #video-highlight-overlay { width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0, 0, 0, 0.5); background-position: center center; background-repeat: no-repeat; position: absolute; z-index: 2; cursor: pointer; } #video-highlight-content { padding: 15px 30px 30px 30px; h2 { font-family: $header-font-stack; font-size: 55px; margin: 0; color: $primary-color; text-transform: uppercase; letter-spacing: 3px; font-weight: 400; } p { font-family: $body-font-stack; color: #000; font-weight: 400; margin: 10px 0 15px 0; font-size: 15px; } button { font-family: $body-font-stack; color: $tertiary-color-text; background-color: $tertiary-color; padding: 15px 25px; } } #video-highlight-modal { .modal-content { margin-top: 60px; } } @media (max-width: 992px) { #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; } }

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 or Vimeo 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' => '', ), )); acf_add_local_field(array ( 'key' => 'field_58a60f5c8d23a', 'parent' => 'theme_settings', 'label' => 'Video Highlight Preview', 'name' => 'video_highlight_preview', 'type' => 'file', 'instructions' => '', 'required' => 0, 'conditional_logic' => 0, 'wrapper' => array ( 'width' => '', 'class' => '', 'id' => '', ), 'return_format' => 'url', 'library' => 'all', 'min_size' => '', 'max_size' => '', 'mime_types' => '', )); endif; } add_action( 'acf/init', 'acf_options_add_video_highlight' );