I have a video changer on my blog that can change videos on youtube using onclick. But that does't work using the select tag in Safari & Chrome.

I've read a bunch of other questions on how to do this but am having no luck in converting this to work using onchange with the select tag.

I am new to javascript.

BTW, I have not gotten this to work when plugged into jsfiddle, pastebin, or any other service.

But it does work if your paste it into Try clicking on the different movie names to see what I mean.

But basically, I need this to work with the select tag, instead of span tag.

<div id='Trailer5' style='display:none'><iframe width='700' height='430' src=';amp;version=3&amp;rel=0&amp;ps=blogger&amp;iv_load_policy=3&amp;showinfo=0' frameborder='0' allowfullscreen></iframe><h3>July 12th, 2013</h3></div>
<div id='Trailer10' style='display:none'><iframe width='700' height='430' src=';amp;version=3&amp;rel=0&amp;ps=blogger&amp;iv_load_policy=3&amp;showinfo=0' frameborder='0' allowfullscreen></iframe><h3>June 20th, 2014</h3></div>
<span onclick='return playVideo("Trailer5","videoPlayback")'>Terms and Conditions may Apply</span><br/>
<span onclick='return playVideo("Trailer10","videoPlayback")'>How to Train your Dragon 2</span>
<div id='videoPlayback'><iframe width='700' height='430' src=';amp;version=3&amp;rel=0&amp;ps=blogger&amp;iv_load_policy=3&amp;showinfo=0' frameborder='0' allowfullscreen></iframe></div></br><h3>Movie "in Theaters" Date Shown Here</h3></div>
<script type='text/javascript'>function playVideo(a,b){"string"==typeof a&&(a=document.getElementById(a));"string"==typeof b&&(b=document.getElementById(b));b.innerHTML=a.innerHTML;return!1}</script></div>

I have a video changer on my blog that can change videos on youtube using onclick. But that does't work using the select tag in Safari & Chrome.

I've read a bunch of other questions on how to do this but am having no luck in converting this to work using onchange with the select tag.

I am new to javascript.

BTW, I have not gotten this to work when plugged into jsfiddle, pastebin, or any other service.

But it does work if your paste it into http://htmledit.squarefree. Try clicking on the different movie names to see what I mean.

But basically, I need this to work with the select tag, instead of span tag.

<div id='Trailer5' style='display:none'><iframe width='700' height='430' src='http://www.youtube-nocookie./embed/vEO9iLWBWvw?theme=light&amp;version=3&amp;rel=0&amp;ps=blogger&amp;iv_load_policy=3&amp;showinfo=0' frameborder='0' allowfullscreen></iframe><h3>July 12th, 2013</h3></div>
<div id='Trailer10' style='display:none'><iframe width='700' height='430' src='http://www.youtube-nocookie./embed/Fkbm8a40TC4?theme=light&amp;version=3&amp;rel=0&amp;ps=blogger&amp;iv_load_policy=3&amp;showinfo=0' frameborder='0' allowfullscreen></iframe><h3>June 20th, 2014</h3></div>
<span onclick='return playVideo("Trailer5","videoPlayback")'>Terms and Conditions may Apply</span><br/>
<span onclick='return playVideo("Trailer10","videoPlayback")'>How to Train your Dragon 2</span>
<div id='videoPlayback'><iframe width='700' height='430' src='http://www.youtube-nocookie./embed/Fkbm8a40TC4?theme=light&amp;version=3&amp;rel=0&amp;ps=blogger&amp;iv_load_policy=3&amp;showinfo=0' frameborder='0' allowfullscreen></iframe></div></br><h3>Movie "in Theaters" Date Shown Here</h3></div>
<script type='text/javascript'>function playVideo(a,b){"string"==typeof a&&(a=document.getElementById(a));"string"==typeof b&&(b=document.getElementById(b));b.innerHTML=a.innerHTML;return!1}</script></div>

• javascript
• html
• google-chrome
• video
• safari

1 Answer 1

Online Demo: http://jsfiddle/thefourtheye/GP5HE/

Instead of the SPAN tags, you can use this

<select onChange="playVideo(this)">
    <option value="Trailer5">Terms and Conditions may Apply</option>
    <option value="Trailer10">How to Train your Dragon 2</option>
</select>

And the script has to be modified like this

<script type='text/javascript'>
    function playVideo(a)
    {
        a = document.getElementById(a.value);
        b = document.getElementById("videoPlayback");
        b.innerHTML = a.innerHTML;
    }
</script>