覆盖 .ytp-cued-thumbnail-overlay-image 的 css 属性答案

【问题标题】：Overwrite css properties for .ytp-cued-thumbnail-overlay-image覆盖 .ytp-cued-thumbnail-overlay-image 的 css 属性
【发布时间】：2020-09-07 20:20:24
【问题描述】：

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

不幸的是，对于桌面，占位符图像被拉伸了 350% 宽度，而在移动设备中它们看起来很棒。我想保持桌面版的延展性，使 youtube 视频像全屏但占位符图像看起来很糟糕。

mobile site

desktop site

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

我有这段代码来替换 youtube 占位符，效果很好......但是如何调整它以覆盖 .ytp-cued-thumbnail-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: ';}

有什么解决办法吗？

【问题讨论】：

标签： jquery flexbox youtube-api youtube-javascript-api youtube-iframe-api

【解决方案1】：

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

【讨论】：

【解决方案2】：

谢谢马切克，

这就是我解决 YT 占位符问题的方法。

Live Demo here:

对于移动设备，我只需将“my_container_wrapper”重置为其原始值，并将 iframe 重置为 100%。

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

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

检查我的网站：

mobile site

desktop site

【讨论】：