<?php 
/* Template Name: Video Gallery Page */
 get_header(); ?>
 
 		<br class="breakline"/>
        
	</div><!-- header -->
    
    <div id="content">
            
        <div class="mainholder01">
                                
            <div class="contentholder txtcenter txtclrblack bgwhite">
            <div class="breadcrumb"><a href="http://dermoviva.com/me">Home</a>&nbsp;&nbsp;>&nbsp;&nbsp;<?php the_title(); ?></div>
            	<?php
					/* Page Title: Video Gallery */
					$pageinfo = new WP_Query(array('name'=>'Video Gallery', 'post_type' => 'page', 'post_status' => 'publish'));
					if( $pageinfo->have_posts() ) : while( $pageinfo->have_posts() ) : $pageinfo->the_post();
						$postId = get_the_ID();
						$thetitle = get_the_title();
						$thecontent = get_the_content();
						echo '<h2>'. $thetitle .'</h2><p>&nbsp; </p>';
						echo '<p>'. do_shortcode($thecontent) .'</p>';
					endwhile; endif; 	
					wp_reset_postdata();					
				?>



                
                <style>
					#ytplayer {
						font-family: 'Lato', sans-serif;
						color: #00483A;
						max-width: 900px;
						display:block;
						margin:0px auto;
					}
					#ytplayer img {
						max-width: 100%;
					}
					.pagination {
						padding: 10px 0;
						text-align: center;
					}
					.pagination span {
						display: inline-block;
						padding: 8px;
						margin: 0 1px;
						border: 1px solid #00483A;
						border-radius: 2px;
						cursor: pointer;
					}
					.pagination span.disabled {
						cursor: default;
					}
					.pagination span:hover:not(.disabled) {
						color: #fff;
						background: #00483A;
					}
					.example-container {
						overflow: hidden;
						margin: 0 -5px;
					}
					.example-container iframe,
					.example-container img {
						display: block;
					}
					.example-container .video-item {
						float: left;
						box-sizing: border-box;
						padding: 5px;
						cursor: pointer;
					}
					.media-viewer {
						margin: 0px auto 20px auto;
						display:block;
					}
					.media-viewer iframe {
						width: 100%;
						height: 240px;
						display: block;
						margin:0px auto;
					}
					.thumbnails {
						overflow: hidden;
					}
					.example-container {
						margin: 0;
					}
					.video-item {
						overflow: hidden;
						width: 50%;
						height: auto;
						padding: 10px;
						float: left;
					}
					.video-item.active {
						opacity: .50;
					}
					.video-item .title {
						color:#000 !important;
						font-size: 12px;
						min-height: 60px;
						display: block;
						text-align: left;
						line-height: 120%;
					}					
					@media (min-width: 600px){
						.video-item {
							width: 33%;
						}
						.media-viewer iframe {
							height: 300px;
						}
					}		
					@media (min-width: 768px){
						.video-item {
							width: 25%;
						}
						.media-viewer iframe {
							height: 500px;
						}
					}		
				</style>
                
                <div id="ytplayer">                
                    <div class="media-viewer" id="ytplayer-media-viewer"></div>
                    <div class="thumbnails">
                        <div class="example-container" id="ytplayer-container"></div>
                        <div class="pagination">
                            <span id="ytplayer-prev-page">< Previous</span>
                            <span id="ytplayer-next-page">Next ></span>
                        </div>
                    </div>
                </div>            
        
                <script>
                
                    $.fn.tubber.defaults.apiKey = 'AIzaSyCoUYU3vj0CFF79T8fBac-pxcs0BkPxmus';
                    $('#ytplayer-container').tubber({
                        username: 'DermovivaArabia',
                        itemsPerPage: 40,
                        embedVideo: false,
                        showVideoTitle: true,
                        prevPageControl: $('#ytplayer-prev-page'),
                        nextPageControl: $('#ytplayer-next-page'),
                        mediaViewer: $('#ytplayer-media-viewer'),
                        templates: {
                            thumbnail: '<img src="{{image_medium}}">'
                        }
                    });
                    
                    $('#ytplayer').click(function() {
                        var srcvar = $("#ytplayer-media-viewer iframe").attr("src") + '?autoplay=1&rel=0';
                        $("#ytplayer-media-viewer iframe").attr('src',srcvar);
                        $("html, body").animate({ scrollTop: 0 }, "slow");
                        return false;
                    });
        
                </script>

            </div><!-- contentholder -->

        </div><!-- mainholder01 -->
        
    </div><!-- content -->       

<?php get_footer(); ?>
<!-- HOME -->