Question

我已经以这种方式插入了响应博主的视频。

CSS

enterButton = new JButton("Enter");
enterButton.setMnemonic(KeyEvent.VK_ENTER); // Shortcut: Alt + Enter

JS

.flex-video {
 position: relative;
 padding-top: 25px;
 padding-bottom: 67.5%;
 height: 0;
 margin-bottom: 16px;
 overflow: hidden;
}

.flex-video.widescreen { padding-bottom: 57.25%; }
.flex-video.vimeo { padding-top: 0; }

 .flex-video iframe,
 .flex-video object,
 .flex-video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) {
  .flex-video { padding-top: 0; }
}

现在我已经按照本教程插入了用于隐藏视频的jQuery动画。

http://www.ssdtutorials.com/tutorials/title/show-hide-div-jquery.html

jquery效果有效，但这样视频就没有响应。

Answer 1

您的div#wr有固定的宽度。只需删除它，例如

#wr {
    margin: 0px auto;
    text-align: left;
}

此外，您的jQuery代码可以简化为：

$(document).ready(function () {
    $('iframe').each(function () {
        $(this).wrap('<div class="flex-video"></div>');
    });

    if ($('div.trigger')) {
        $('div.trigger').click(function (e) {
            $(this).toggleClass('open')
                .toggleClass('close')
                .next()
                .slideToggle(100);

            e.preventDefault();
        });
    }
});

完整代码：JSFiddle

视频响应无效

1 个答案: