0

我有一个有图像的 div。当我单击图像时，我喜欢将具有图像的位置转换为播放嵌入视频，如下所示：

<iframe width="560" height="315" src="http://www.youtube.com/embed/DxkEe_l7S3g" frameborder="0" allowfullscreen></iframe>

任何帮助，将不胜感激。如果可能的话，我不喜欢刷新页面。

4

6 回答 6

5

编辑：这是一个可以使用的小提琴：http: //jsfiddle.net/9pdX6/

这取决于您从哪里获取视频 ID。

假设你有这个：

<img data-id="DxkEe_l7S3g" src="some_image" />

然后你可以像这样实现你正在寻找的东西：

$('img').click(function() {
    $(this).replaceWith(
        '<iframe width="560" height="315" src="http://www.youtube.com/embed/' + 
        $(this).data('id') + '" frameborder="0" allowfullscreen></iframe>'
    );
});
于 2013-06-13T22:00:35.140 回答
4

你可以这样做：

$('#yourImage').click(function(){
    $(this).replaceWith('<iframe>',{
        width: 560,
        height: 315,
        src: 'http://www.youtube.com/embed/DxkEe_l7S3g',
        frameborder: 0,
        allowfullscreen: true
    });
});

或者：

$('#yourImage').click(function(){
    $(this).after('<iframe>',{
        width: 560,
        height: 315,
        src: 'http://www.youtube.com/embed/DxkEe_l7S3g',
        frameborder: 0,
        allowfullscreen: true
    }).remove();
});

或者：

$('#yourImage').click(function(){
    $(this).parent().html('<iframe>',{
        width: 560,
        height: 315,
        src: 'http://www.youtube.com/embed/DxkEe_l7S3g',
        frameborder: 0,
        allowfullscreen: true
    });
});
于 2013-06-13T21:59:30.563 回答
2

查看 jQuery 的html()函数。这允许您获取 HTML 并将其转储到容器中。

于 2013-06-13T21:59:30.113 回答
1 
$(document).ready(function(e) {
    $("#yourImageID").click(change);
});

function change(){
    $("#imgParentDivID").html('<iframe width="560" height="315" src="http://www.youtube.com/embed/DxkEe_l7S3g" frameborder="0" allowfullscreen></iframe>');
}
于 2013-06-13T22:01:42.993 回答
1

有很多选择。最简单的方法之一可能是 jQuery .replaceWith函数，它用你暗示的新元素替换当前元素对象。

像这样：

var vid = $("<iframe />", { frameborder: 0, src: "http://www.youtube.com/embed/DxkEe_l7S3g" }).css({ height: "315px", width: "560px" });

$(function() {
    $(document).on("click", "img", function(e) {
        $(this).replaceWith(vid);
    });
})

例子

另一个选项是将 Iframe 放置在 HTML 上，将其 CSS 分配给display: none;并使用 jQuery 的淡入/淡出来实现“经典”效果。像这样：

$(function() {
    $(document).on("click", "img", function(e) {
        $(this).fadeOut("slow", function(e) { $("iframe").fadeIn("fast"); });
    });
})

例子

我不确定您到底在寻找什么，但多亏了 jQuery 的预定义 javascript 库，如果不是 100 种，也有几十种方法可以满足您的要求。这些例子只有 2 个！

于 2013-06-13T22:06:32.270 回答
0

说一下图片

<img src="..." data-src="http://www.youtube.com/embed/DxkEe_l7S3g"/>

用 jQuery

$(document).on("click","img",function(){
    var frame = '<iframe width="560" height="315" src="'+$(this).data("src")+'" frameborder="0" allowfullscreen></iframe>';
    $(this).replaceWith(frame);
});
于 2013-06-13T22:07:27.883 回答