CODEWITHSUNDEEP
javascriptjqueryhtmlurliframe
Useless
Useless

Reputation: 13

how can I use a users input to change the last part on an iframe link?

I want the users input from the prompt to change the last part of the iframe's url. here is my code so far:

<!DOCTYPE html>
<html>
  <head>
    <style>
    body{
      background-color:#ffffff
    }
    </style>
  </head>
  <body>
<!-- im attempting to make an iframe display a video the user types into 
the prompt.-->
<p id="Video"></p>

    <script>
      var VideoURL = prompt("type the last part of the YouTube.com video 
URL here");
      if(VideoURL != null){
        document.getElementById("Video").innerHTML= "you typed '' " + 
VideoURL + " '' as your url.";

      } else {
        alert("please reload and type a URL.");
      }
    </script>
<iframe src="www.youtube-nocookie.com/embed/(I WANT THE USERS INPUT 
HERE)" allowfullscreen></iframe>
  </body>
</html>

I've been trying to do this for 3 days and still can't figure it out. please help.

Upvotes: 0

Views: 120

Answers (3)

yarwest
yarwest

Reputation: 990

It is possible to change the src attribute of an <iframe> using JavaScript and I think that is the best way of tackling your problem.

First off, I suggest giving your <iframe> an id to make it easier to retrieve.

For example: <iframe id="youtubePlayer" allowfullscreen></iframe>

If you have the user input stored in the variable VideoURL, you can use the following line of code to modify the src of the <iframe>

document.getElementById('youtubePlayer').src = "www.youtube-nocookie.com/embed/" + VideoURL;

First we are retrieving the element using document.getElementById(), then we are modifying the source by assigning a value to .src.

I hope this helps :)

Upvotes: 1

Scott Marcus
Scott Marcus

Reputation: 65845

You are just missing a single line at the end of your script that sets the src property of the iframe

<!DOCTYPE html>
<html>
  <head>
    <style>
    body{
      background-color:#ffffff
    }
    </style>
  </head>
  <body>
    <!-- im attempting to make an iframe display a video the user types into 
the prompt.-->
    <p id="video"></p>
    <iframe src="www.youtube-nocookie.com/embed/" allowfullscreen></iframe>
    
    <script>
      // By placing the script just before the end of the <body>, all the DOM elements will
      // have loaded by the time the script runs.
      
      // Get user input:
      var videoURL = prompt("type the last part of the YouTube.com video URL here");
      
      if(videoURL != null){
        // Get a reference to the iframe and reset its src property:
        var frame = document.querySelector("iframe");
        frame.src = frame.src + videoURL;
        
        // Output the new URL
        document.getElementById("video").innerHTML= "New src is: " + frame.src;
      } else {
        alert("please reload and type a URL.");
      }
    </script>
  </body>
</html>

Upvotes: 0

freginold
freginold

Reputation: 3956

You'll have to assign the last part of the URL via a JavaScript variable, since you won't have it at page load when the HTML renders. The easiest way to do it would be to assign an ID to your iframe -- for example, videoFrame -- and then you could just do this:

document.getElementById('videoFrame').src = "www.youtube-nocookie.com/embed/" + VideoURL;

Upvotes: 0

Related Questions