Question

这是我的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>

它是一种小型画廊。我想要实现的是点击右侧的任何小视频，它必须加载在精选视频框中。如何实现这个??

这是jsfiddle链接http://jsfiddle.net/4HQc4/9/

Answer 1

请改用：http://jsfiddle.net/4HQc4/10/

JS：

$(document).on('click', 'td img', function () {
    var videoID = $(this).data('video');
    $('.featured-box iframe').fadeOut(function () {
        $(this).attr('src', 'http://www.youtube.com/embed/' + videoID).load(function () {
            $(this).fadeIn();
        });
    });
});

HTML更改：

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

这会使用视频预览图像，并在点击时在特色div中加载新视频。

在iframe上执行on click事件

1 个答案: