function getYouTubeThumbnailImage($video_id) { return "http://i3.ytimg.com/vi/$video_id/hqdefault.jpg"; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery Lightbox</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> </head> <body> <div class="container"> <h3 class="text-center">My Video Gallery</h3> <div class="row"> <div class="col-md-4"> <div class="thumbnail"> <a data-fancybox="video-gallery" href="https://www.youtube.com/watch?v=J6cl2CxZBzw&t=483s&autoplay=1"><img src="<?php echo getYouTubeThumbnailImage('J6cl2CxZBzw'); ?>"></a> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <a data-fancybox="video-gallery" href="https://www.youtube.com/watch?v=LyoUY63dzWA&t=27s&autoplay=1"><img src="<?php echo getYouTubeThumbnailImage('LyoUY63dzWA'); ?>"></a> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <a data-fancybox="video-gallery" href="https://www.youtube.com/watch?v=J8kspD3zPuw&t=405s&autoplay=1"><img src="<?php echo getYouTubeThumbnailImage('J8kspD3zPuw'); ?>"></a> </div> </div> </div> <div class="row"> <div class="col-md-4"> <div class="thumbnail"> <a data-fancybox="video-gallery" href="https://www.youtube.com/watch?v=E3TRbgQ1h8o&t=8s&autoplay=1"><img src="<?php echo getYouTubeThumbnailImage('E3TRbgQ1h8o'); ?>"></a> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <a data-fancybox="video-gallery" href="https://www.youtube.com/watch?v=VDCvx1Sy1eM&autoplay=1"><img src="<?php echo getYouTubeThumbnailImage('VDCvx1Sy1eM'); ?>"></a> </div> </div> <div class="col-md-4"> <div class="thumbnail"> <a data-fancybox="video-gallery" href="https://www.youtube.com/watch?v=P7OTTzd7VC8&t=371s&autoplay=1"><img src="<?php echo getYouTubeThumbnailImage('P7OTTzd7VC8'); ?>"></a> </div> </div> </div> </div> <script src="//code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
등록된 댓글이 없습니다.