정보실

웹학교

정보실

그누보드 웹 사이트를위한 YouTube 비디오 갤러리를 만드는 방법

본문

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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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>
  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 162회 ]  작성일18-04-27 16:01

웹학교