0

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 embed that video. This is what I have so far: (I am very new to HTML)

<!DOCTYPE html>
<html>

<form>
  Video URL:<br>
  <input id="url" type="url">
  <iframe width="560" height="315" src="url" frameborder="0" allowfullscreen></iframe>
</form>

<iframe width="420" height="315"
src="url">
</iframe>

</html>
Guy
  • 41
  • 10
  • Possible duplicate of [generate youtube video's embed code using its url](https://stackoverflow.com/questions/21476121/generate-youtube-videos-embed-code-using-its-url) – inafalcao Sep 29 '17 at 02:12
  • As I said, I am new to HTML, and I do not know how to implement this. It is not a full code. I realize that it is duplicated – Guy Sep 29 '17 at 02:13

2 Answers2

0

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.

inafalcao
  • 1,415
  • 1
  • 11
  • 25
  • Thank you! Where do I place the javascript function. I have this right now (I have no experience at all in html): – Guy Sep 29 '17 at 02:35
  • Video URL:
    function embed() { var url = document.getElementById('url').value document.getElementById('myframe').src = url; } document.getElementById("mybutton").addEventListener("click", embed);     – Guy Sep 29 '17 at 02:36
  • Please, post that on a fiddle. – inafalcao Sep 29 '17 at 03:09
0

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>
YouTube Channel Miki Sivan
  • 1