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

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 上的 padding-bottom 从 31.65% 增加到 56.25%(16:9 比例)。我可能遗漏了一些明显的东西，但 Javascript/jQuery 并不是我的强项。任何帮助将不胜感激。

Answer 1

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

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

JQuery CSS