点击较小的视频即可更改大视频

Question

我正在尝试创建一个自适应视频库，您可以在其中点击12种不同视频，并在较小的12上方显示更大的视频。我已启动javascript，但我＆＃39 ;我遇到了一些墙（我还是javascript的新手）。

这是HTML

    <div id="gallery">
        <div id="mainvideo">
            <video id="displayvideo" src="#" autoplay></video>
            <div id="mainvideowords">
                <h2>#</h2>
                <h3>#</h3>
            </div>
        </div>
        <div id="videogallery">
            <div class="littlevideo">
                <video src="#"></video>
                <div class="littlevideowords">
                    <h4>#</h4>
                    <p>#</p>
                </div>
            </div>
        </div>
    </div>

以下是我目前在剧本上的内容：

<script type="text/javascript">
    $(document).ready(function() {
        $(".littlevideo").click(function() {
            var video = $(this).closest("div").find("video").attr("src")
            $('#displayvideo').attr("src",video);
        });
    });
</script>

我还看到视频的其他一些问题甚至没有出现。我应该使用iframe吗？任何帮助，将不胜感激。谢谢！