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
Post a Comment