Home/ Questions/Q 6989615
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T19:14:07+00:00

What I have at the moment is a simple Facebook app that has pulled

  • 0

What I have at the moment is a simple Facebook app that has pulled the video information from a YouTube channel.

Just now, I embed the first video of the response from YouTube into the placeholder along with the title, views and description and all videos (including the first) are displayed below the div that holds the embedded video.

Then, when the user clicks any of the video thumbnails, that video is then embedded in the placeholder div.

I can get this to work by hard-coding the id of the video inside the YouTube associative array but I can’t figure out how to use the id variable with PHP in the last line of my jQuery code.

Here is my current code:

$url = 'http://gdata.youtube.com/feeds/api/videos?max-results=20&alt=jsonc&orderby=published&format=5&safeSearch=none&author=CHANNELID&v=2';
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_REFERER, $url);
$body = curl_exec($ch);
curl_close($ch);
$data = json_decode($body, true);

?>
<div id="placeholder" style="font-family:Helvetica; max-width:500px; margin:0 0 20px 0;">
<div id="player"><iframe width="480" height="274" src="https://www.youtube.com/embed/<?php echo $data['data']['items'][0]['id']; ?>" frameborder="0" allowfullscreen></iframe></div>
<div class="title" style=" font-size:14px; font-weight:bold; color:#3B5998; margin:2px 0 3px 0;"><?php echo $data['data']['items'][0]['title']; ?> </div>
<div class="views" style="color:#BBB; font-size:12px;"><?php echo $data['data']['items'][0]['viewCount'];?> views</div>
<div class="description" style="font-size:14px;"><?php echo $data['data']['items'][0]['description'];?></div>
<div class="hr" style="padding:5px 0 0 0; float:left; border-bottom: 1px solid #96CC90; width:480px;"></div>
</div>
<?php

foreach($data['data']['items'] as $item) {
$id = $item['id'];
$description = $item['description'];
$description = str_replace('uk.opticalexpress.com', '', $description);
$description = str_replace('-', '', $description);
$description = trim($description);

$thumb = $item['thumbnail']['sqDefault'];

$i = 0;
?>
<div class="video" id="<?php echo $i; ?>" style="font-family:Helvetica; float:left; max-width:150px; min-height:130px; margin:0 0px 20px 10px;">
    <div class="thumb" style="position:relative; left:0; top:0;">
        <img src="<?php echo $item['thumbnail']['sqDefault'];?>" title="<?php echo $description;?>" style="position:relative; top:0; left:0px;"/>
        <img src="../images/play-thumb.png" style="position:absolute; top:30px; left:45px;"/>
    </div>
    <div class="title" style="font-size:14px; font-weight:bold; color:#3B5998; margin:2px 0 3px 0;"><?php echo $item['title']; ?> </div>
    <div class="views" style="font-size:12px;"><?php echo $item['viewCount'];?> views</div>
</div>

<?php
$i++;
}
?>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.video').click(function() {
        var id = $(this).attr('id');

        $('#placeholder').fadeOut('slow');
        $('#placeholder').html('<div id="player"><iframe width="480" height="274" src="https://www.youtube.com/embed/<?php echo $data['data']['items'][1]['id']; ?>" frameborder="0" allowfullscreen></iframe></div>');
        $('#placeholder').fadeIn('slow');
    });
});
</script>

Sorry for the wall of text (and inline css)!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Difficult… I would watch the click event on .video with jQuery, then carry out a GET request to a PHP file on the server (RESTish) which would generate the HTML needed for the iframe, then set the #video html to the html you just received. Might work…

    Another possibility, is to load all the iframes, then on .video click just show the one matching the same unique id or something. This would mean more load time for your users though, best to go with the AJAX type approach.

    • 0