Featherlight YouTube 视频 link - 不能将播放按钮放在缩略图上 link/open

Question

这是一个很棒的插件，而且效果很好！但是，我使用 before pseudo-class 在客户的 YouTube 视频缩略图上放置了一个播放按钮。它显示，但按钮上没有单击事件。

我如何调整它以便点击播放按钮也能打开视频？

工作 jsfiddle：

<ul>
<li class='youtube'>
<a href="https://www.youtube.com/embed/TZCh2px0dOs&#10;" data-featherlight="iframe" data-featherlight-iframe-width="640" 
data-featherlight-iframe-height="480" data-featherlight-iframe-frameborder="0" data-featherlight-iframe-allow="autoplay; encrypted-media"  
data-featherlight-iframe-allowfullscreen="true">
<div class="gc-li-display-container">
<img src="https://img.youtube.com/vi/TZCh2px0dOs/default.jpg" class="youtub-image" alt="Play Video" width="95" height="71"></div>
            </a>
            </li>
            </ul>

Answer 1

您将按钮添加为 li 的 ::before，因此它位于另一个子项 - a 之上。将 ::before 放在 a 上，它将起作用（并且您需要重新定位它 - 更改 top 和 left）。

JSFiddle

Answer 2

你在 main li before 中使用 z-index 9，这比 inside items 大，所以尝试使用 before psuedo class to inner div 像这样

.inline { display: none }
.gc-li-display-container::before {
    content: '';
    background: url(//cdn.shopify.com/s/files/1/0209/7620/files/youtube-play.png?3160547863319844836);
    background-size: cover;
    position: absolute;
    top: 30px;
    left: 30px;
    width: 36px;
    height: 36px;
    z-index: 9;
}
li{list-style:none outside none;position:relative;height:70px;width:100px;}
li a{position:relative;}

<ul>
<li class='youtube'>
<a href="https://www.youtube.com/embed/TZCh2px0dOs&#10;" data-featherlight="iframe" data-featherlight-iframe-width="640" data-featherlight-iframe-height="480" data-featherlight-iframe-frameborder="0" data-featherlight-iframe-allow="autoplay; encrypted-media" data-featherlight-iframe-allowfullscreen="true"><div class="gc-li-display-container"><img src="https://img.youtube.com/vi/TZCh2px0dOs/default.jpg" class="youtub-image" alt="Play Video" width="95" height="71"></div>
            </a>
            </li>
            </ul>

Answer 3

有一个简单的 hack，

您可以添加到 :before 伪两个 css 属性即 user-select: none;pointer-events: none; 这将使按钮看起来好像不存在，因此当用户单击在上面，他实际上会点击视频并播放。因此，您可以将按钮放在视频内的任何位置，它仍然有效。

检查更新后的jsFiddle。

Featherlight YouTube 视频 link - 不能将播放按钮放在缩略图上 link/open

Featherlight YouTube video link - position play button over thumbnail doesn't link/open

css

jquery

pseudo-element

featherlight.js