Embed YouTube Video That User Inputs

I am trying to create a code in HTML that embeds a YouTube video (but the URL that you entered). I would enter the url (ex: www.youtube.com/watch?v=XXXXXXXXXXX), and then it would

Solution 1:

Try to continue from that fiddle:

https://jsfiddle.net/8kodfrsy/

What I've made was just to change the video src attribute.

document.getElementById('myframe').src = url;

If you reference this answer here you'll notice that the video's url needs to have /embed/<video id>

So, for example, if you have the following url:

https://www.youtube.com/watch?v=ChOTlnQZ4uU

You're going to change it to:

https://www.youtube.com/embed/ChOTlnQZ4uU

So, just transform the string to get the video id and modify the url string using simple js.

Check this on how to transform the string url.

Solution 2:

The best answer is, I believe, the following code:

<form action="http://www.youtube.com/results" method="get" target="_blank" >
<input name="search_query" type="text" maxlength="128" />
<select name="search_type">
<option value="">Videos</option>
<option value="search_users">Channels</option>
</select>
<input type="submit" value="Search" />
</form>