CODEWITHSUNDEEP
javascripthtmlyoutube
user11262992
user11262992

Reputation: 1

How can I embed youtube video by entering video id in input?

I want to make an input that embeds a youtube video by entering a video id. This is what I tried, but it didn't work

HTML

<form action="http://www.youtube.com/embed/">
   <input class="EnterID" type="text" id="txtSRC" />
   <input class="submitid" type="button" value="Submit" onclick="SetSrc()" />
</form>

<iframe id="myIfreme" src="" frameborder="0" marginwidth="0" scrolling="yes" height="420" width="640"></iframe>

JS

<script type="text/javascript">
        function SetSrc() {
            document.getElementById("myIfreme").src = document.getElementById("txtSRC").value;
        }

</script>

Upvotes: 0

Views: 714

Answers (2)

ControlAltDel
ControlAltDel

Reputation: 35096

A couple of things:

  1. You should activate your function off of form onsubmit

  1. Add the event object, call preventDefault() on it, and then use document.location = ...;

         function SetSrc(e) {
       e.preventDefault();
         document.getElementById("myIfreme").src = document.getElementById("txtSRC").value;
         document.location = ...;
     }

Upvotes: 1

Ram
Ram

Reputation: 76

Why does action have the url to be prepended? It should be in the javascript code like this:

<script type="text/javascript">
        function SetSrc() {
            document.getElementById("myIfreme").src = "http://www.youtube.com/embed/" + document.getElementById("txtSRC").value;
        }

</script>

Upvotes: 0

Related Questions