I used the code from the following question to insert a YouTube video into a page: http://stackoverflow.com/questions/1314662/how-to-resize-a-youtube-player-from-thumbnail-size-to-normal-size.
Given the following html:
<dl>
<dt>Thoughts of Sacrament</dt>
<dd><div class="placeholder"><img src="img/H5ZEYFgmfYo.png" id="H5ZEYFgmfYo" /></div><div class="close">x</div><p>There is no purpose to this text, it's just here in order to provide a frame of visual reference while I work upon the code behind this here 'page,' still: I hope you enjoy, uh...looking.</p></dd>
<dt>Sanity falling</dt>
<dd><img src="img/2ieLb3RAblA.png" id="2ieLb3RAblA" /></dd>
</dl>
I expected that the following jQuery should remove the .placeholder div that contains the YouTube video:
$(document).ready(function(){
// ...Other code to insert the YouTube...
$("div.close").click(function() {
$(this).sibling("div").remove();
// $(this).parent().empty();
});
});
Eventually I aim to 'reverse' the original animation and then swap the youtube video for the original .png, but I'm having trouble accessing the relevant div. The commented out code works, and empties the parent element, but I just can't seem to access the sibling .placeholder.
Any help would be more than appreciated, thanks in advance =)
Update:
So far I've not got much further than before, the current page is over here, and the code from that page is below:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>jQuery & YouTube</title>
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<!--
Currently -almost- works
- unfortunately the 'close' option doesn't care
if the video's been played or not (and will remove the picture if it's there).
- the close button also (tries?) to animate the flash object and then drops
the replacement image in. Looks wrong.
On updating the page, the image -after closing/removing the video
is no longer 'clickable'
-->
<script type="text/javascript">
$(document).ready(function(){
$(".placeholder img").click(function () {
var videoID = $(this).attr("id");
$(this).animate({
width: "445px",
height: "364px"
}, 600, function() {
$(this).replaceWith("<object id=\"" + videoID + "\" class=\"yt\" width=\"425\" height=\"344\"><param name=\"movie\" value=\"http://www.youtube.com/v/" + videoID + "&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999\"></param><param name=\"allowFullScreen\" value=\"true\"></param><param name=\"autoplay\" value=\"1\"></param><param name=\"allowscriptaccess\" value=\"always\"></param><embed src=\"http://www.youtube.com/v/" + videoID + "&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999\" type=\"application/x-shockwave-flash\" allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"425\" height=\"344\"></embed></object>", function() {$(this).parent().children().find("div .close").toggle()} );
});
});
$("div.close").click(function() {
var videoID = $(this).parent().find("object").attr("id");
$(this).parent().children("div .placeholder").animate({
width: "252px",
height: "199px"
}, 600, function() {
$(this).replaceWith("<div class=\"placeholder\"><img id=\"" + videoID + "\" src=\"img/" + videoID + ".png\" /></div>");
});
});
});
</script>
</head>
<body>
<div id="wrap">
<div id="head">
<div id="branding" title="demo page for jQuery issues.">
<h1>jQuery and YouTube problems</h1>
<div id="navigation">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">videos</a></li>
<li><a href="#">dates</a></li>
</ul>
</div>
</div>
</div>
<div id="content">
<dl>
<dt>Thoughts of Sacrament</dt>
<dd>
<div class="placeholder">
<img src="img/H5ZEYFgmfYo.png" id="H5ZEYFgmfYo" />
</div>
<div class="close">x</div>
<p>There is no purpose to this text, it's just here in order to provide a frame of visual reference while I work upon the code behind this here 'page,' still: I hope you enjoy, uh...looking.</p>
</dd>
<dt>Sanity falling</dt>
<dd>
<div class="placeholder">
<img src="img/2ieLb3RAblA.png" id="2ieLb3RAblA" />
</div>
<div class="close">x</div>
</dd>
</dl>
</div>
</div>
</body>
</html>
You'll notice the over-use of divs (used because I thought -for some reason- it might make navigating the DOM easier: so far as I can tell, it didn't), for which I can only apologise. And I'll make the necessary sacrifice to Meyer, Molly and Cederholm.