Update the href of a Iframe link in html

Question

So here's my situation. I have a page HTML that displays a YouTube video, using a standard iFrame link. What I am trying to do is have a text box on my page where people would enter a video's ID and the video would reload with the new link or video ID entered.

Code HTML:

<p> Type your video's ID here: <input type="text" name="VideoID"></p>

<iframe title="YouTube video player" src="http://www.youtube.com/embed/hqiNL4Hn04A" width="480" height="390" frameborder="0"></iframe></p>

score 0 · Answer 1 · edited May 23 '17 at 12:17

you should look at this post as I think this is what you want.

dynamically set iframe src

http://jsfiddle.net/MALuP/

<script type="text/javascript">
function iframeDidLoad() {
alert('Done');
}

function newSite() {
var sites = ['http://getprismatic.com',
             'http://gizmodo.com/',
             'http://lifehacker.com/']

document.getElementById('myIframe').src = sites[Math.floor(Math.random() * sites.length)];
}    
</script>
<input type="button" value="Change site" onClick="newSite()" />

score 0 · Accepted Answer · answered Jun 04 '14 at 16:02

You need to request the video ID within a form like

<p>
    <form id="getytid">
        <label>Type your video's ID here:</label>
        <input type="text" name="VideoID" />
        <input type="submit" value="go" />
    </form>
</p>
<p>
    <iframe id="theFrame" title="YouTube video player" src="" width="480" height="390" frameborder="0"></iframe>
</p>

Notice we assigned an ID to the form and the iframe so we can manipulate them through jQuery.

Then you could use this code to update the iframe with a new video ID :

jQuery(document).ready(function($) {
    $("#getytid").on("submit", function (e) {
        e.preventDefault();
        $("#theFrame").attr("src", "http://www.youtube.com/embed/" + $("input[name=VideoID]").val()+"?autoplay=1")
    }); // on
}); // ready

See JSFIDDLE

NOTE:

The initial iframe html doesn't have any src attribute set. You can leave it empty until the visitor inputs an ID or you can fill it with a default video path

score 0 · Answer 3 · answered Jun 04 '14 at 16:05

Save the youtube url as a variable.

Html:

<input type="text" name="VideoID" id="youtubevid" />

JS:

var youtube = "http://www.youtube.com/embed/"; // base
var video;
var url;
// set value
$('#youtubevid').on('change', function() { 

video = $('#youtubevid').val();

url = youtube + video;

// set link attribute here in iframe.
//$('#idofiframehere').attr('src', url);
});

Update the href of a Iframe link in html

3 Answers3