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

Question

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

所以，我的 HTML 对于这个 div 看起来是这样的：

<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

如果您有 </strong> 的宽度，您可以随时设置它的大小并用 jquery 设置动画。</p> <pre><code>$('.video-container').animate({ width:'200px', height:'200px', }); </code></pre> </section> </div> </div> <div class="line"></div> <div id="footer">©2023 WhoseBug</div> </body> </html>

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

Javascript/Jquery - Increase padding percentage of div on click

html

javascript

css

youtube

jquery