我正在尝试在我的 wordpress 网站上嵌入一个响应式的 youtube 视频播放器，其中包含一些自定义的 youtube 参数和不同的图像作为缩略图。我希望我的视频也可以通过单击启动。我尝试了很多东西，但找不到最终确定我的想法的方法。现在我的代码如下所示:
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<link rel=stylesheet hre=/styles.css>
<style>
.responsive-container { position: relative; padding-bottom: 53.25%; padding-top: 30px; height: 0; overflow: hidden;}
.responsive-container, .responsive-container iframe { max-width: 1280px; max-height: 720px; }
.responsive-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.responsive-container {
filter:alpha(opacity=0); // IE
-moz-opacity:0; // Firefox
-khtml-opacity: 0;
opacity: 0;
}
</style>
</head>
<body>
<div class="responsive-container" >
<iframe width="1280" height="720" src="//youtube.com/embed/**VIDEO-ID**?VQ=HD720&rel=0&theme=dark&color=white&autohide=2&modestbranding=1" frameborder="1" allowfullscreen></iframe>
</div>
我已将播放器的不透明度设置为 0，因为我正在使用 Nimble builder Wordpress 插件，并且已将我的部分的背景设置为所需的缩略图。 唯一的问题是我希望我的 YouTube 播放器的不透明度在点击(或在移动设备上触摸)后恢复到 1，这样它就可以当场替换背景缩略图。
我希望我能理解... 我想这是一个真正的新手问题，我也是，但经过数小时的搜索和实验后，我仍然无法弄清楚，所以真诚地感谢您的帮助!
非常感谢。
最佳答案
您可以通过添加带有类的图像来实现此目的
<img src="/Images/video.png" class="iframePlaceholder">
然后添加jQuery来用iframe onclick替换图片
$( '.iframePlaceholder' ).click( function ()
{
var video = '<div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" src="https://www.youtube.com/embed/yourcode?rel=0&autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe></div>';
$( this ).replaceWith( video );
});
关于javascript - 使用 JS 或其他方法单击后更改嵌入式 youtube 播放器的不透明度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58822053/