Modify html with javascript

Question

I'm developping a little extension for myself. The goal is simple, you click on the extension, you enter a youtube link, and the video is played inside your extension popup.

Here is my HTML

<body>
    Youtube Link: <input type="text" id="link" name="firstname">
    <button type="button" id="do-link"> Go ! </button>
    <script src="popup.js"></script>
    <p id="write">Here your link</p>
    <iframe id="ytplayer" title="YouTube video player" class="youtube-player" type="text/html" 
    width="640" height="390" src="https://www.youtube.com/watch?v=DTqTs15Hc9w"
    frameborder="0" allowFullScreen></iframe>
</body>

And my JS :

var a;
function link() {
    a = document.getElementById('link').value;
    document.getElementById('ytplayer').src = a;
    console.log(a);
}
document.getElementById('do-link').onclick = link;

So this basically just print in the console what's inside my text box. And it displays a KSI video (or whichever video you want if you put hte link. I want to know if there's a simple way to replace the youtube links by the link written by the user in the text box ?

http://stackoverflow.com/questions/3730159/changing-iframe-src-with-javascript — the_marcelo_r, Sep 09 '14 at 14:59
@theMarceloR : ** Refused to display 'https://www.youtube.com/watch?v=d40HfTslWQE' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN' ** Got this in my console log now — Nicolas Charvoz, Sep 09 '14 at 15:04

score 3 · Accepted Answer · edited May 23 '17 at 10:33

You can change the SRC of the IFRAME, but you'll need to use the embed url from Youtube, and not just an IFRAME of Youtube page, otherwise you will get a cross domain error.

Also, from the Youtube URL, you need to get the Video ID and use it in the embed SRC

Editing your code:

HTML

`Youtube Link: <input type="text" id="link" name="firstname">
<button type="button" id="do-link"> Go ! </button>
<script src="popup.js"></script>
<p id="write">Here your link</p>
<iframe id="iframe_id" width="640" height="390" src="//www.youtube.com/embed/u1vhQOOZUF4" frameborder="0" allowfullscreen></iframe>`

JS

var a;
function link() {
    a = document.getElementById('link').value;
    var videoid = youtube_parser(a);
    var new_link = "https://www.youtube.com/embed/" + videoid;

    document.getElementById('write').innerHTML = new_link;
    document.getElementById('iframe_id').src = new_link;
    console.log(new_link);
}
document.getElementById('do-link').onclick = link;

function youtube_parser(url){
    var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
    var match = url.match(regExp);
    if (match&&match[7].length==11){
        return match[7];
    }else{
        alert("Url incorrecta");
    }
}

Here is a working version (fiddle): http://jsfiddle.net/x7mxos14/

Extra: Using Lasnv function to parse.

Yes that's what I saw on other posts, it's just an extension for myself so I don't have to use a parser, but it's a very good idea, I just used the replace() function in js — Nicolas Charvoz, Sep 09 '14 at 15:17

score 0 · Answer 2 · answered Sep 09 '14 at 15:00

0

Just replace the iframe src with a inside your click function.

answered Sep 09 '14 at 15:00

the_marcelo_r

1,847
22
35

Modify html with javascript

2 Answers2