javascript - Changing an element with js toggle -



javascript - Changing an element with js toggle -

i made function, when click on link 'play', div black background changes iframe video. seems working fine. problem is, want add together multiple play links multiple videos. don't know how it, when click on sec play link, video changes first video sec in same place.

my code:

<script> var toggle = function() { var mydiv = document.getelementbyid('videoholder');document.getelementbyid("frame").src="http://www.youtube.com/embed/yuobzwf0aws"; if (mydiv.style.display === 'block' || mydiv.style.display === '') mydiv.style.display = 'none'; else mydiv.style.display = 'block' } </script> <a href="javascript:void(0)" onclick="toggle();">play</a><br> <div style="width:560px; height:315px; background-color:#111111;"> <div id="videoholder" style="display:none;"> <iframe id="frame" width="560" height="315" src="" frameborder="0" allowfullscreen></iframe> </div></div>

you seek this.

<script> function toggle(url) { var mydiv = document.getelementbyid('videoholder'); document.getelementbyid("frame").src = url; if (mydiv.style.display === 'block' || mydiv.style.display === '') { mydiv.style.display = 'none'; } else { mydiv.style.display = 'block' } } </script> <a href="javascript:void(0)" onclick="toggle('http://www.youtube.com/embed/yuobzwf0aws');">play 1</a><br> <a href="javascript:void(0)" onclick="toggle('http://www.youtube.com/embed/dqw4w9wgxcq');">play 2</a><br> <div style="width:560px; height:315px; background-color:#111111;"> <div id="videoholder" style="display:none;"> <iframe id="frame" width="560" height="315" src="" frameborder="0" allowfullscreen></iframe> </div></div>

javascript

Comments

Popular posts from this blog

php - How to pass multiple values from url -

xslt - DocBook 5 to PDF transform failing with error: "fo:flow" is missing child elements. Required content model: marker* -

database - php search bar when I press submit with nothing in the search bar it shows all the data -