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 ?

@theMarceloR : ** Refused to display '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
– Nicolas Charvoz, Commented Sep 9, 2014 at 15:04

Community · Accepted Answer · 2017-05-23 10:33:37Z

3

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.

edited May 23, 2017 at 10:33

CommunityBot

11 silver badge

answered Sep 9, 2014 at 15:14

Walter Gammarota

1363 bronze badges

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

1 Comment

Nicolas Charvoz Over a year ago

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

the_marcelo_r · Accepted Answer · 2014-09-09 15:00:44Z

0

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

answered Sep 9, 2014 at 15:00

the_marcelo_r

1,85623 silver badges36 bronze badges

Collectives™ on Stack Overflow

Modify html with javascript

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related