覆盖 .ytp-cued-thumbnail-overlay-image 的 css 属性
Overwrite css properties for .ytp-cued-thumbnail-overlay-image
我有响应式 YouTube 视频：width:350% 和 height:100vh。
不幸的是，对于桌面设备，占位符图像被拉伸了 350% 的宽度，而在移动设备上它们看起来很棒。我想保留让 YouTube 视频像全屏一样但占位符图像看起来很糟糕的桌面版。
我无法覆盖 .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("this is your URL")</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: ';}
有什么解决办法吗？
只是盲目拍摄，但您可以尝试将 min-width:100%; max-width:100%; min-height:100%; max-height:100%; width:100%; height:100%; 添加到缩略图元素或容器中，然后在网络检查器中尝试打开和关闭这些属性以验证哪些最有效。
谢谢 Maciek，
这就是我解决 YT 占位符问题的方法。
对于移动设备，我只是将 "my_container_wrapper" 重置为其原始值并将 iframe 重置为 100%。
我也发现了 Soundcloud 占位符的问题...很伤心，我为每个嵌入式 Soundcloud 添加了一个 css class。我希望找到一种方法来全局设置它。
.soundcloud_iframe{ min-width: 100vw; min-height:100vh; left: 0%;}
查看我的网站：
我有响应式 YouTube 视频：width:350% 和 height:100vh。
不幸的是，对于桌面设备，占位符图像被拉伸了 350% 的宽度，而在移动设备上它们看起来很棒。我想保留让 YouTube 视频像全屏一样但占位符图像看起来很糟糕的桌面版。
我无法覆盖 .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("this is your URL")</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: ';}
有什么解决办法吗？
只是盲目拍摄，但您可以尝试将 min-width:100%; max-width:100%; min-height:100%; max-height:100%; width:100%; height:100%; 添加到缩略图元素或容器中，然后在网络检查器中尝试打开和关闭这些属性以验证哪些最有效。
谢谢 Maciek，
这就是我解决 YT 占位符问题的方法。
对于移动设备，我只是将 "my_container_wrapper" 重置为其原始值并将 iframe 重置为 100%。
我也发现了 Soundcloud 占位符的问题...很伤心，我为每个嵌入式 Soundcloud 添加了一个 css class。我希望找到一种方法来全局设置它。
.soundcloud_iframe{ min-width: 100vw; min-height:100vh; left: 0%;}
查看我的网站：