Question

我有一个问题，我花了半天时间试图解决没有真正解决方案我感到满意。我有一个旋转木马，其中包含youtube视频的占位符图像，当您点击它时，占位符图像被删除并被youtube视频替换，但由于占位符图像的宽高比与视频不同，我需要这个响应，我需要增加div的填充百分比，当用户点击（或点击）div时，这些填充的百分比。

所以，这个div的HTML看起来像这样：

<div class="youtube_video">
<img src="img/video_poster_carousel.jpg" width="986" height="308">
<!-- <iframe width="986" height="555" src="https://www.youtube.com/embed/Wt_Ruy_ejPY?enablejsapi=1&list=PL027E2B6D9900A88F&showinfo=0&controls=1" frameborder="0" allowfullscreen></iframe> -->
</div>

CSS：

/* video */
.youtube_video { position: relative; padding-bottom: 31.65%; height:0;  }
.youtube_video img { position: absolute; display: block; top: 0; left: 0; /*width: 100%; height: 100%;*/ z-index: 20; cursor: pointer; }
.youtube_video:after { content: ""; position: absolute; display: block; 
    background: url(play-button.png) no-repeat 0 0; 
    top: 45%; left: 45%; width: 46px; height: 36px; z-index: 30; cursor: pointer; } 
.youtube_video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;  }

/* image poster clicked, player class added using js */
.youtube_video.player img { display: none; }
.youtube_video.player:after { display: none; }

现在正在使用Javascript：

  $(function() { 
    var videos  = $(".youtube_video");

        videos.on("click", function(){
            var elm = $(this),
                conts   = elm.contents(),
                le      = conts.length,
                ifr     = null;

            for(var i = 0; i<le; i++){
              if(conts[i].nodeType == 8) ifr = conts[i].textContent;
            }

            elm.addClass("player").html(ifr);
            elm.off("click");
        });
  });

基本上，我需要在点击div时将.youtube_video的填充底部从31.65％增加到56.25％（16：9比例）。我可能错过了一些明显的东西，但Javascript / jQuery并不是我最强的观点。任何帮助将不胜感激。

Answer 1

尝试将此添加到您的点击功能？

$('.youtube_video').css('padding-bottom','56.25%');

JQuery CSS

Answer 2

DEMO

如果您拥有＆lt; iframe＆gt; 的宽度，则可以始终设置其大小并使用jquery为其设置动画。

$('.video-container').animate({
    width:'200px',
    height:'200px',
});

Javascript / Jquery - 在点击时增加div的填充百分比

2 个答案: