覆盖.ytp-cued-缩略图-覆盖图片的css属性。

Question

我有响应的youtube视频：宽度：350%，高度：100vh。

不幸的是，在桌面上，占位图被拉伸了350%的宽度，而在手机上，它们看起来很棒。我想在桌面上保持youtube视频的全屏拉伸，但占位图看起来很糟糕。

移动网站

桌面网站

我无法覆盖.ytp-cued-缩略图-overlay-image来进行修复。

我有这段代码来替换youtube的占位符，效果很好......但如何调整它来覆盖.ytp-cued-缩略图-overlay-image css属性。

对不起，我是新手

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="source">url(&quot;this is your URL&quot;)</div>
<div id="match"></div>


string = $(".ytp-cued-thumbnail-overlay").css('background-image');
$("#img1").attr('src', string.match(/.*url\(['|"]([^)]*)['|"]\)/i));

在这里覆盖css。

string = $("#source").text();
$("#match").text(string.match(/.*url\(['|"]([^)]*)['|"]\)/i)[1]);

#source, #match { display:inline-block;border:1px solid #aaa;padding:10px; } // width:100% !important;
#source:before { color:#aaa;content:'source: '; }
#match:before { color:#aaa;content:'match: ';}

有什么解决办法吗？

Answer 1

只是一个盲目的拍摄，但你可以尝试添加 min-width:100%; max-width:100%; min-height:100%; max-height:100%; width:100%; height:100%; 缩略图元素或容器，然后在 Web 检查器中尝试打开或关闭这些属性，以验证什么是最佳效果。

Answer 2

谢谢Maciek。

这是我为了解决YT占位符的问题而做的。

现场演示在这里。

在手机上，我只是把 "my_container_wrapper "重置为原始值，把iframe重置为100%。

我也发现了Soundcloud占位符的问题......太悲哀了，我为每个嵌入的Soundcloud添加了一个css类。我希望找到一种方法来全局设置它。

.soundcloud_iframe{ min-width: 100vw; min-height:100vh; left: 0%;}

请看我的网站。

移动网站

桌面网站