-1

Im new in all this amazing thing called front end and i´m already working in a project but i need a little help with this:

So the thing is that the user could enter a youtube URL in a text box and a embed iframe video is automatically generated from it so he can preview it without reloading the page

How could i do that?

a have found 2 separated scripts that could help but i can´t make them work at the same time:

Extract YouTube video ID from URL: 

[http://codepen.io/catmull/pen/cnpsK][1]

YouTube Embed Optimized with JavaScript: 

[http://codepen.io/SitePoint/pen/CKFuh][1]

Any ideas? It will really help me if you answer with a live example :)

Carlos Veloz
  • 33
  • 1
  • 5
  • Please include with your answer the code that you've tried and doesn't work. – Felipe Brahm Oct 21 '15 at 00:53
  • 1
    Please **edit** your question by adding what code you have tried to achieve this. You can also edit in your question the code in those links that you provided. To increase your chance of getting an answer, you can read some [guidelines on how to ask a good question](http://stackoverflow.com/help/how-to-ask). – Keale Oct 21 '15 at 00:55

1 Answers1

4

if you have youtube url https://www.youtube.com/watch?v=sGbxmsDFVnE, you can embed it by taking the video id off the end and putting at the end of youtube.com/embed/

you can get the video id using string.split()

var url = "https://www.youtube.com/watch?v=sGbxmsDFVnE";
var id = url.split("?v=")[1]; //sGbxmsDFVnE

var embedlink = "http://www.youtube.com/embed/" + id; //www.youtube.com/embed/sGbxmsDFVnE

then just make that embed link the source to an existing iframe on the page

document.getElementById("myIframe").src = embedLink;

example of an iframe

<iframe id="myIframe" width="560" height="315" frameborder="0" allowfullscreen></iframe>

working code here

Ryan Radomski
  • 71
  • 5