Javascript 在iframe上执行单击事件

这是我的html代码

<table width="100%">
        <tr>
            <td colspan="4" align="right">
            </td>
        </tr>
        <tr>
            <td align="left" colspan="3">
                <h1>
                    Featured</h1>
            </td>
            <td align="right">
                <table>
                    <tr>
                        <td>
                            <h1>
                                Popular</h1>
                        </td>
                        <td>
                            <h1>
                                |
                            </h1>
                        </td>
                        <td>
                            <h1>
                                Recent</h1>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td rowspan="2">
                <iframe width="300" height="400" src="http://www.youtube.com/embed/oNgMIrNs1-o" frameborder="0"
                    onload="Show();" allowfullscreen></iframe>
            </td>
            <td style="padding-top: 0px;">
                <iframe width="200" height="190" src="http://www.youtube.com/embed/oNgMIrNs1-o" frameborder="0"
                    allowfullscreen></iframe>
            </td>
            <td style="padding-top: 0px;">
                <iframe width="200" height="190" src="http://www.youtube.com/embed/oNgMIrNs1-o" frameborder="0"
                    allowfullscreen></iframe>
            </td>
            <td style="padding-top: 0px;">
                <iframe width="200" height="190" src="http://www.youtube.com/embed/oNgMIrNs1-o" frameborder="0"
                    allowfullscreen></iframe>
            </td>
        </tr>
        <tr>
            <td style="padding-bottom: 0px;">
                <iframe width="200" height="190" src="http://www.youtube.com/embed/oNgMIrNs1-o" frameborder="0"
                    allowfullscreen></iframe>
            </td>
            <td style="padding-top: 0px;">
                <iframe width="200" height="190" src="http://www.youtube.com/embed/oNgMIrNs1-o" frameborder="0"
                    allowfullscreen></iframe>
            </td>
            <td style="padding-top: 0px;">
                <iframe width="200" height="190" src="http://www.youtube.com/embed/oNgMIrNs1-o" frameborder="0"
                    allowfullscreen></iframe>
            </td>
        </tr>
    </table>

作为特色的
流行的
|
最近的

它有点像一个小图库。我想要实现的是点击右边的任何小视频，它必须 加载到特色视频框中。 如何做到这一点

这里是JSFIDLE链接

请改用此链接：

JS:

HTML更改：

<td style="padding-top: 0px;">
    <img src="http://img.youtube.com/vi/oNgMIrNs1-o/mqdefault.jpg" data-video="oNgMIrNs1-o" />
</td>

---

这将使用视频预览图像，并在单击时在功能分区中加载新视频。

对右侧的视频使用缩略图，而不是在iframe中加载所有视频。好的……dat看起来不错。让我试试你可以尝试使用类似@iBlue的东西-看看我的实现，它应该可以解决你的问题。

<td style="padding-top: 0px;">
    <img src="http://img.youtube.com/vi/oNgMIrNs1-o/mqdefault.jpg" data-video="oNgMIrNs1-o" />
</td>