CODEWITHSUNDEEP
javascripthtml
Uday
Uday

Reputation: 1484

How to display a iframe when click on a link

I am not a programmer/developer, but held up to modify a piece of a website.

Say, i have a website, where we have 10 links, upon clicking on 1st link, a frame should be displayed with a associated video and with Close button. User can watch that video and can close that frame.(I also wanted to pass the youtube URL as parameter to the below function)

How can i do that?

I tried below html

<html>
<body>
<script>
function playme() 
{
    document.getElementByID('video1').style.visibility=true;
    document.getElementByID('video1').src="https://www.youtube.com/watch?v=G2KlPOYu6U8";
}
</script>
<a href="#" id="playvideo" onclick="playme()">Video 1</a></li>
<iframe id="video1" width="520" height="360"  frameborder="0" hidden=true></iframe>

But here the iframe is not coming up. How to do this?

Upvotes: 1

Views: 2586

Answers (4)

Pedro Muniz
Pedro Muniz

Reputation: 578

You have to change getElementByID to getElementById

Use display: none and display: '' to show and hide iframe.

You have to use the embedded iframe's url from youtube to avoid "Load denied by X-Frame-Options" error. https://www.youtube.com/embed/G2KlPOYu6U8

Your code must be: 

<html>
<body>
<script>
function playme()
{
    document.getElementById('video1').src = "https://www.youtube.com/embed/G2KlPOYu6U8"; //use embed url from you tube
    document.getElementById('video1').style.display = ''; //set display to default
}
</script>
    <a href="#" id="playvideo" onclick="playme()">Video 1</a><br/>
    <iframe id="video1" width="520" height="360"  frameborder="0" style="display: none;" ></iframe> <!-- use style="display: none;" to hide iframe -->
</body>
</html>

Upvotes: 1

Andrew Bone
Andrew Bone

Reputation: 7291

Something like this will work.

/************************************************
 **Call playMe() with the video code and the   **
 **iframe id in the brackets                   **
 ************************************************
 ************************************************
 **https://www.youtube.com/watch?v=xLRM0tQmmC8 **
 **the code after v= so xLRM0tQmmC8            **
 **in this case                                **
 ************************************************/
playMe = function (vidCode, id) {
    var iframe = document.querySelector('#'+id);
    iframe.style.display = "block";
    iframe.src = "http://www.youtube.com/embed/" + vidCode;
};
<a href="#" id="playvideo" onclick="playMe('G2KlPOYu6U8','video1')">Video 1</a>

<iframe id="video1" width="520" height="360" frameborder="0" style="display:none;"></iframe>

Upvotes: 1

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

Change your iframe to this:

<iframe id="video1" width="520" height="360"  frameborder="0" style="visibility: hidden"></iframe>

And it works, because your javascript is defined to show with the css visibility property.

Edit

Change this javascript piece too:

document.getElementByID('video1').style.visibility = "visible"; // instead of true

Upvotes: 0

Quentin
Quentin

Reputation: 943097

style.*** properties expect their values to be strings not booleans.

true is not a valid value for the visibility property, you must use "visible" or "hidden".

That won't actually help though because the reason you can't see the iframe is not because it is visibility: hidden.

Change hidden=true to style="visibility: hidden;" as well.

Upvotes: 1

Related Questions