Question

我想要一个

<iframe width="640" height="360" src="//www.youtube.com/embed/-Uwjt32NvVA?rel=0&autoplay=1" frameborder="0" allowfullscreen style="float: right;"></iframe>

在点击div后加载。

这是因为我不想在用户导航到它之前加载（因为它是自动播放）。它是自动播放的，因为我无法点击Chrome中的iFrame视频，因为Chrome错误。

onclick="loadvideo();"之类的内容

由于

Answer 1

使用Jquery。load();

function loadVideo() {
    $('#div').load('<iframe width="640" height="360" src="//www.youtube.com/embed/-Uwjt32NvVA?rel=0&autoplay=1" frameborder="0" allowfullscreen style="float: right;"></iframe>');
}

Answer 2

用户点击加载按钮后将其附加到div：

<div id='videoDiv'></div>
<a id='loadVideoButton'>LOAD</a>

<script>
    var loadVideo = function() {
        $('#videoDiv').append("<iframe width="640" height="360" src="//www.youtube.com/embed/-Uwjt32NvVA?rel=0&autoplay=1" frameborder="0" allowfullscreen style="float: right;"></iframe>");
    };


    $("#loadVideoButton").click(loadVideo());
</script>

Answer 3

这样就可以了解

$('div').click(function(){
   $(this).html("<iframe width=\"640\" height=\"360\" src=\"//www.youtube.com/embed/-Uwjt32NvVA?rel=0&autoplay=1\" frameborder=\"0\" allowfullscreen style=\"float: right;\"></iframe>"
});

请参阅此js fiddle

使用脚本加载iFrame

3 个答案: