Skip to content

Instantly share code, notes, and snippets.

@loschke
Last active February 9, 2020 14:02
Show Gist options
  • Save loschke/b0fd3c1f434c5010006c448930686e94 to your computer and use it in GitHub Desktop.
Save loschke/b0fd3c1f434c5010006c448930686e94 to your computer and use it in GitHub Desktop.
https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=50&playlistId={DEINE_PLAYLIST_ID}&fields=items%2Fsnippet&key={DEIN_API_KEY}
<?php
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;
}
$api = get_data("https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId={DEINE_PLAYLIST_ID}&maxResults=10&fields=items%2Fsnippet&key={DEIN_API_KEY}");
$video = json_decode($api, true);
?>
<?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']?>"
frameborder="0"
allowfullscreen>
</iframe>
</div>
<?php } // Ende Foreach Schleife?>
<style>
.video-wrapper {
float:left;
margin: 0 20px 20px 0;
}
</style>
<?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?>
<style>
/*simple Demo CSS */
.thumbnail-wrapper {
width:320px;
padding: 3px;
border: 1px solid #ccc;
float:left;
margin: 0 20px 20px 0;
}
</style>
<!-- Lightbox Plugin -->
<link rel="stylesheet" type="text/css" href="magnific/magnific-popup.css"/>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="magnific/magnific-popup.min.js"></script><!-- Lightbox Plugin -->
<script type="text/javascript">
/* Lightbox initialisieren */
$('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
disableOn: 700,
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
fixedContentPos: false
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment