Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Videos via Youtube API v3 auf Website ausgeben
Tutorial: YouTube Channel/Playlist Videos via Data API v3 auf der eigenen Website ausgeben
Article: http://sevenx.de/blog/tutorial-youtube-channelplaylist-videos-via-data-api-v3-auf-der-eigenen-website-ausgeben-2
Demo: http://sevenx.de/demo/youtube-api-playlist/ (Bootstrap styled)
Benötigt:
- Youtube API Key
- Youtube Playlist ID
www.sevenX.de - Rico Loschke
<?php
//Funktion zum Auslesen einer Datei mit cURL
function get_data($url)
{
$ch = curl_init();
$timeout = 5;
curl_setopt($ch,CURLOPT_URL,$url);
curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,$timeout);
$data = curl_exec($ch);
curl_close($ch);
return $data;
}
//Speichern der API Abfrage im JSON Format
$api = get_data("https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId={DEINE PLAYLIST ID}&maxResults=50&fields=items%2Fsnippet&key={DEIN API KEY}");
//Umwandeln des JSON Format in einen PHP Array
$video = json_decode($api, true);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo: Iframe Ausgabe über Youtube API v3</title>
</head>
<style>
.video-wrapper {
float:left;
margin: 0 20px 20px 0;
}
</style>
<body>
<?php
//Schleife durch $video Array beginnend bei items
foreach($video['items'] as $video_data) { ?>
<div class="video-wrapper">
<iframe
width="480" height="320"
src="https://www.youtube.com/embed/<?=$video_data['snippet']['resourceId']['videoId']?>?theme=light&modestbranding=1"
frameborder="0"
allowfullscreen>
</iframe>
</div>
<?php } // Ende Foreach Schleife?>
</body>
</html>
<?php
//Funktion zum Auslesen einer Datei mit cURL
function get_data($url)
{
$ch = curl_init();
$timeout = 5;
curl_setopt($ch,CURLOPT_URL,$url);
curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,$timeout);
$data = curl_exec($ch);
curl_close($ch);
return $data;
}
//Speichern der API Abfrage im JSON Format
$api = get_data("https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId={DEINE PLAYLIST ID}&maxResults=50&fields=items%2Fsnippet&key={DEIN API KEY}");
//Umwandeln des JSON Format in einen PHP Array
$video = json_decode($api, true);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo: Lightbox Ausgabe über Youtube API v3</title>
<!-- Required Lightbox Plugin http://dimsemenov.com/plugins/magnific-popup/ -->
<link rel="stylesheet" type="text/css" href="magnific/magnific-popup.css"/>
<style>
/*simple Demo CSS */
.thumbnail-wrapper {
width:320px;
padding: 3px;
border: 1px solid #ccc;
float:left;
margin: 0 20px 20px 0;
}
</style>
</head>
<body>
<?php
//Schleife durch $video Array beginnend bei items
foreach($video['items'] as $video_data) { ?>
<div class="thumbnail-wrapper">
<a href="http://www.youtube.com/watch?v=<?=$video_data['snippet']['resourceId']['videoId']?>" class="popup-youtube">
<img src="<?=$video_data['snippet']['thumbnails']['medium']['url']?>" alt="...">
</a>
<div class="caption">
<p><strong><?=$video_data['snippet']['title']?></strong></p>
<p><a href="http://www.youtube.com/watch?v=<?=$video_data['snippet']['resourceId']['videoId']?>" class="popup-youtube">anschauen</a></p>
</div>
</div>
<?php } // Ende Foreach Schleife?>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- Required Lightbox Plugin http://dimsemenov.com/plugins/magnific-popup/ -->
<script type="text/javascript" src="magnific/magnific-popup.min.js"></script>
<script type="text/javascript">
/* ######## Lightbox Thumbnails */
/* Equal Thumbnail Heights */
$.fn.setAllToMaxHeight = function(){
return this.height( Math.max.apply(this, $.map( this , function(e){ return $(e).height() }) ) );
}
$(window).load(function() {
$('div.caption').setAllToMaxHeight();
});
/* Lightbox initialisieren */
$('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
disableOn: 700,
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
fixedContentPos: false
});
/* END Lightbox Thumbnails */
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.