javascript - Replace img with iframe on click of button - Stack Overflow

admin管理员组

文章数量:1355532

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="">
        <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

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./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

• javascript
• jquery
• html
• css
• youtube

Share Improve this question Follow edited May 23, 2017 at 11:44 CommunityBot 111 silver badge asked May 4, 2013 at 20:23 Dale1985Dale1985 4311 gold badge11 silver badge33 bronze badges 4

• Hi Dale , can you make an example on jsfiddle? it makes it much easier to help you. – Ramtin Gh Commented May 4, 2013 at 20:29
• I havent used jsfiddle before now so i hope its all in there correct: jsfiddle/ANRHT/2 – Dale1985 Commented May 4, 2013 at 20:45
• Yea, except for js which you gotta put in js section , I've made a correct one including the solution to your problem, check the answer ;) – Ramtin Gh Commented May 4, 2013 at 21:08
• You can use Codegena iframe generator tool to generate iframes that load on image click – Shan Eapen Koshy Commented Sep 29, 2015 at 14:31

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

This will do All you want including close button: Here is the working fiddle: http://jsfiddle/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./uploads/chorus_image/image/5372321/battlefield3-screen-12.0_cinema_640.0.jpeg" data-video="http://www.youtube-nocookie./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>

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

本文标签： javascriptReplace img with iframe on click of buttonStack Overflow