CODEWITHSUNDEEP
javascriptjqueryhtmlcssyoutube
Dale1985
Dale1985

Reputation: 43

Replace img with iframe on click of button

Im pretty new to js/jquery and need some help from someone more knowledgeable!

I have had a good look on this site and on the web but cannot find the answer myself. I've played around myself but with my limited knowledge I just cannot figure out what to do next.

What I've got

I have an img that when clicked is replaced by an iframe (youtube video), much like a placeholder/poster, and that works perfectly with the below code, which I originally found here: How to add a splash screen/placeholder image for a YouTube video:

<div class="playbutton"></div>    
<img src="image.jpg" data-video="http://www.youtube.com/videolink">
        <script>
                $('img').click(function(){
            var video = '<div class="video-container"><iframe src="'+ $(this).attr('data-video') +'"></iframe></div>';
            $(this).replaceWith(video);
        });
        </script>

As I said - it works perfectly when the image is clicked it is replaced by the video.

The Problem

I have now added a play button (currently a div but I can use img instead) floating above the img. If I click on the play button nothing happens (obviously as it is nothing to do with the script).

I want this play button to "trigger" the replacing of the img with the iframe but I do not have a clue what to add to my script to make this happen.

What I'm looking for

I'm looking for the play button to be the "trigger" when clicked or ideally to have both the play button and the img as "triggers" so it works if a user clicks on the image too and not just the play button.

While I've got you...

Would I also be able to replace the iframe with the img again if a close button is added to the mix and clicked on?

Any help will be greatly appreciated!

Dale

Upvotes: 4

Views: 10833

Answers (2)

Ramtin Gh
Ramtin Gh

Reputation: 1050

This will do All you want including close button: Here is the working fiddle: http://jsfiddle.net/ANRHT/6/

js:

 $('.playbutton,img').click(function(){
   var video = '<div class="video-container"><iframe src="'+$('img').attr('data-video') +'"></iframe></div>';
   $('.video').hide();
   $('.tube').html(video);
   $('.close').show();
 });
 $('.close').click(function(){
   $('.video').show();
   $('.tube').empty();
   $('.close').hide();
 });

HTML:

<div class="video">
  <div class="playbutton">Play</div>    
  <img src="http://cdn0.sbnation.com/uploads/chorus_image/image/5372321/battlefield3-screen-12.0_cinema_640.0.jpeg" data-video="http://www.youtube-nocookie.com/embed/U8HVQXkeU8U?&autoplay=1&rel=0&fs=0&showinfo=0&autohide=3&modestbranding=1">
</div>
<div class="tube"></div>
<div class="close">Close X</div>

Upvotes: 5

Explosion Pills
Explosion Pills

Reputation: 191749

$("#play-button").on('click', function () {
    //this fires the same click event from your code.
    $("img").trigger('click');
});
$("#close-button").on('click', function () {
    $("iframe").replaceWith("<img src='image.jpg'>");
});

Upvotes: 0

Related Questions