Javascript Ustream通道Jquery插件库

我正在为我的一个网站写一个

插件

，我只想在我的网站上嵌入我的Ustream频道，我写了一个非常基本的代码，但是这个代码没有按预期工作，请看这个，这是我到目前为止写的代码

<div class="col-md-12 col-sm-12 playground">
    <iframe id="main_player" src="http://www.ustream.tv/embed/21427417?html5ui&amp;autoplay=true&amp;volume=90&amp;controls=true&amp;showtitle=true" height="550" frameborder="0" width="100%"></iframe>           
</div>

频道代码

<div id="thumbs">
  <div class="col-md-3 col-sm-3">
    <div class="thumb_me">
      <iframe id="" src="http://www.ustream.tv/embed/21427417?html5ui&amp;autoplay=true&amp;volume=0&amp;controls=false&amp;showtitle=false" height="250" frameborder="0" width="100%"></iframe>
      <div class="desc text-center">Channel 1</div>
      <div class="click_me"></div>
    </div>
  </div>

  <div class="col-md-3 col-sm-3">
    <div class="thumb_me">
      <iframe id="" src="http://www.ustream.tv/embed/21472172?html5ui&amp;autoplay=true&amp;volume=0&amp;controls=false&amp;showtitle=false" height="250" frameborder="0" width="100%"></iframe>
      <div class="desc text-center">Channel 2</div>
      <div class="click_me"></div>
    </div>
  </div>

  <div class="col-md-3 col-sm-3">
    <div class="thumb_me">
      <iframe id="" src="http://www.ustream.tv/embed/21472913?html5ui&amp;autoplay=true&amp;volume=0&amp;controls=false&amp;showtitle=false" height="250" frameborder="0" width="100%"></iframe>
      <div class="desc text-center">Channel 3</div>
      <div class="click_me"></div>
    </div>
  </div>
</div>

第一频道
第二频道
第三频道

默认情况下，第一个视频将在

div playder

中自动播放，并带有声音，所有其他频道都将在小缩略图中自动播放且没有声音

我只想当有人点击缩略图时，缩略图

iframe

视频应该动画化到操场，代替主视频，而不需要重新加载

iframe

，在缩略图中播放，并在

iframe

src中添加

属性&volume=100

这里是的链接

请和我分享你的想法，这样我才能完成