Changing iframe src with JavaScript not working

Question

I'm trying to pull a YouTube video id from an img and then pass it into an iframe to play an embedded video. My iframe is inside a div which is invisible until the img is clicked:

<div id="testimonialbackground" style="display:none;">  
    <a href="#" onclick="toggledisplay(this);">Click here</a> to close the video  
    <iframe id="testimonialframe" src="" frameborder="0" allowfullscreen></iframe>  
</div>  
<img src="http://img.youtube.com/vi/x-ROeKGEYSk/1.jpg" onclick="toggledisplay(this);" />

And here's the JavaScript. It works fine until this line elem.setAttribute('src', newsrc);, at which point my page freezes up:

function toggledisplay(obj) {  
    var div = document.getElementById('testimonialbackground');  
    var elem = document.getElementById('testimonialframe');  
    if (div.style.display == "block") {  
        div.style.display = "none";  
        elem.setAttribute('src', "");  
    }  
    else {  
        div.style.display = "block";  
        var explosion = obj.src.split("/");  
        var newsrc = "http://www.youtube.com/embed/" + explosion[4] + "?autoplay=1";  
        elem.setAttribute('src', newsrc); // <---- BROKEN LINE RIGHT HERE
        elem.contentWindow.location.reload(); //to refresh the iframe  
    }  
}

Thanks for any help!

Community · Accepted Answer · 2017-05-23 12:24:43Z

6

src is an attribute you can access directly so instead of your line elem.setAttribute('src', newsrc); just use this:

elem.src = "http://www.youtube.com/embed/" + explosion[4] + "?autoplay=1";

Once you set the src there is no need to refresh the iframe, as setting the src will do that automatically. See What's the best way to reload / refresh an iframe using JavaScript? for more info on reloading iframes. (Basically it points out that you can set the src of an iframe to itself to refresh the iframe).

edited May 23, 2017 at 12:24

CommunityBot

11 silver badge

answered Mar 19, 2013 at 17:30

Ryan

5,6823 gold badges40 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Changing iframe src with JavaScript not working

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related