CODEWITHSUNDEEP
javascriptiframeyoutube
Edward Chien
Edward Chien

Reputation: 67

Changing iframe src with JavaScript not working

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!

Upvotes: 4

Views: 15034

Answers (1)

Ryan
Ryan

Reputation: 5682

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

Upvotes: 6

Related Questions