Problem with removing/animating a YouTube flash video-player container

StackOverflow https://stackoverflow.com/questions/1318395

Question

I used the code from the following question to insert a YouTube video into a page: 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.

Was it helpful?

Solution

So...after some work and lots and lots and, well, lots of trial and error and much reference to the jQuery docs and other SO questions to get a feel for what's going on here, I hacked together a particularly dirty means of accessing the sibling .placeholder div.

$(document).ready(function(){

// ...Other code to insert the YouTube...

    $("div.close").click(function() {

        var videoID = $(this).parent().find("object").attr("id");

        $(this).parent().children("div .placeholder").replaceWith("<div class=\"placeholder\"><img id=\"" + videoID + "\" src=\"img/" + videoID + ".png\" /></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>
            <img src="img/2ieLb3RAblA.png" id="2ieLb3RAblA" />
        </dd>
</dl>

</div>

I had hoped that this would in some way reset the page to its starting position, in order that I could click on the .png to enlarge the image and then replace with the video, click on the .close div to shrink it back down and then be able to click on the .png to enlarge it and insert the YouTube video again.

I don't know why that seemed like a good idea, but it did. Sadly it doesn't work and I have no idea why. I have...a hunch it might be to do with the jQuery live event/function/thing (I'm really new to jQuery), but I don't see how to connect everything together, yet.

I'm going to leave the question open a while longer, since I suspect there are lots of better answers applicable to the question I raised. There's almost have to be, really.

Just for completion's sake, as this is a development of an earlier question I'll post the entire code from the html file below, so's anyone coming in can see what I've done and hopefully have an idea of why, if not a better understanding of my decision-process.

The whole code:

<?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>in the absence of light | ITAOL</title>
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />

    <script type="text/javascript" src="js/jquery.js"></script>

        <script type="text/javascript">
$(document).ready(function(){

    $("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>");
        });
    });

    $("div.close").click(function() {

        var videoID = $(this).parent().find("object").attr("id");

        $(this).parent().children("div .placeholder").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="In the Absence of Light.">

            <h1 title="In the Absence of Light">In The Absence of Light</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 id="foot">

    </div>


</div>

</body>

</html>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top