How to refer a iframe from html in JavaScript

Question

I've just started learning html and CSS and now I want to add a bit JavaScript which I don't know anything of!

I want to create a random button that shows a random embed video (for instance from 1-5 videos) in a iframe. I searched google and found a JavaScript/(jQuery?):

<script type="text/javascript" src="jquery-1.11.0.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {

var array=["Item1", "Item2", "Item3", "Item4", "Item5"];
$('#button').bind('click', function() {

    var random = array[Math.floor(Math.random() * array.length)];
    $("h1").html(random);
});
});
</script>

With the html:

<h1>Will be replaced</h1>
<button id="button">Random</button>

So for example in my html I got:

<iframe width="640" height="360" src="http://www.youtube.com/embed/npvNPORFXpc"     frameborder="0" allowfullscreen></iframe>

I want this embedded video to show on the page and when u hit the random button it should change to 1-5 video's. How do i set this as a item in the JavaScript, so I have a video on each item?

Problem 2:

Sometimes the same number is generated which will lead to the same item.

I hope someone can teach me something about this!

If you hit the second time on the random button, should the iframe be replaced by another or just another iframe should be added to the page? — Daniel Bejan
– Daniel Bejan, Commented Mar 3, 2014 at 17:40
Thanks for your fast response, i would like the iframe being replaced in the same position as it is. Or should the video in the iframe be replaced if that is even possible? by using a source option in js? — user3375841
– user3375841, Commented Mar 3, 2014 at 17:43
Well, you cold set a new src to the iframe...I'll make a small script in a few minutes to demonstrate ... — Daniel Bejan
– Daniel Bejan, Commented Mar 3, 2014 at 17:44
if you give the iframe an ID you can easily select it the same fashion you're selecting the button: <iframe id="video"> can be selected with $("#video") and then you can set the src attribute using $("#video").attr("src", newUrlHere) api.jquery.com/attr — xec
– xec, Commented Mar 3, 2014 at 17:53

xec · Accepted Answer · 2014-03-03 18:05:07Z

1

It may not be much , but is a starting point : Click me

Just got the first 5 video id's I could found :))

Here is the Js :

$(document).ready(function() {
    var array=["FOIjvHjK0Rw", "CcsUYu0PVxY", "dE_XVl7fwBQ", "iIwxR6kjTfA", "USe6s2kfuWk"];
    $('#button').bind('click', function() {
        var random = array[Math.floor(Math.random() * array.length)];
        $("h1").html(random);
        var url="http://www.youtube.com/embed/"+random;
        $('#frame').attr('src', url);
        $('#frame').css('visibility','visible');
    });
});

edited Mar 3, 2014 at 18:05

xec

18.1k3 gold badges50 silver badges58 bronze badges

answered Mar 3, 2014 at 17:56

Daniel Bejan

1,4681 gold badge15 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Daniel Bejan Over a year ago

I don't use jQuery often :))...I prefer plain js

xec Over a year ago

The essential parts here are plain JS, with jquery it's easier to select using css syntax and bind event handlers (cross browser). Here is a plain JS version using the same logic: jsfiddle.net/BH6UT/3

user3375841 Over a year ago

Thanks that helps alot! now i dont need the header anymore to see the random button working. Now the only problem is that it generates the same video sometimes, how can i exclude the active video of generating again?

xec Over a year ago

The Alot appreciates all the help it can get! :) hyperboleandahalf.blogspot.no/2010/04/…

Daniel Bejan Over a year ago

Do you really want to use jQuery?..I think it would be easier in plain javascript...

|

Collectives™ on Stack Overflow

How to refer a iframe from html in JavaScript

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related