Question

我使用jQuery插件collagePlus在网页上构建类似画廊的作品集。

我找到this way to replace the images with YouTube videos，我尝试使用代码。但是，当我使用 nssmart 显示它时，视频将无法显示正确的尺寸。我通过将宽度和高度都设置为“100％＆＃39;”来解决这个问题。

之后我得到了两个新问题：

1）当鼠标悬停视频时标题显示，标题覆盖播放器的控件。

2）如果窗口以任何方式调整大小，一切都搞砸了 - 图像包装器不会相应地调整它们的尺寸，视频播放器也会消失。

图像是这样的：

<div class='Collage'>
    <div class='Image_Wrapper' data-caption='caption text'>
        <img id='id' src='img.jpg' onclick='loadVideo()'/>
    </div>
</div>

这是我点击img后调用的功能：

function loadVideo(){
    $('#id').replaceWith('<iframe width="100%" height="100%" src="https://www.youtube.com/embed/video" frameborder="0" allowfullscreen></iframe>');
};

我尝试在loadVideo（）上插入此行来解决＃1：

$('#id').closest('.Caption').css('display', 'none');

但它不起作用，标题仍然存在。我也尝试过使用.css（＆＃39; visibility＆＃39;，＆＃39; hidden＆＃39;）和.hide（），但没有成功。我已经预料到问题＃2，因为collagePlus代码是为了与img一起使用而构建的，但我不知道是否有办法解决这个问题。我该如何解决这些问题呢？

我使用这些图片作为YouTube上视频的链接，但有些老板可能很痛苦。

Answer 1

我找到了一种使用自定义数据属性和一些jQuery代码来实现这些功能的方法。

在 .Image_Wrapper 中创建一个div，然后设置一个数据视频属性，其中嵌入的YouTube视频的链接位于其中：

<div class='Image_Wrapper' data-caption='caption text'>
    <div class='videoContainer'>
        <img src='img.jpg' data-video='https://www.youtube.com/embed/video' />
    </div>
</div>

然后创建两个函数，一个用于在单击imgs后放置视频，另一个用于正确调整视频大小 - 您将使用最后一个函数作为处理 collagePlus 函数内的回调图像调整大小“ applyModifications（）”。

$(".videoContainer > img").click( function() {
    var a = $(this).data("video"),
        b = $(this).width(),
        c = $(this).height();
    $(this).closest(".videoContainer").prepend('<iframe width="'+ b +'" height="'+ c +'" src="'+ a +'" frameborder="0" allowfullscreen></iframe');
});

function videoResize() {
  $("iframe").each( function() {
    var a = $(this).closest(".Image_Wrapper").width(),
        b = $(this).closest(".Image_Wrapper").height();
    $(this).width(a).height(b);
  });
};

collagePlus上的视频

1 个答案: