How to use a javaScript Variable within PHP? - php

Question

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)!

Answer 1

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.

Answer 2

you can use the ajax by doing this, i have done it like this way, hope this will also work for you.
<div id="video1" class=".temp"></div>
<script type="text/javascript">
$(document).ready(function() {
$('.temp').click(function() {
var currentId = $(this).attr('id');
showVideo(currentId);
});
};
function showVideo(str)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("VideoFrameDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","inc/AjaxOnClickValues.php?id="+str,true);
xmlhttp.send();
}
</script>