Featherlight YouTube 视频链接 - 缩略图上方的播放按钮未链接/打开答案

【问题标题】：Featherlight YouTube video link - position play button over thumbnail doesn't link/openFeatherlight YouTube 视频链接 - 缩略图上方的播放按钮未链接/打开
【发布时间】：2019-01-20 00:19:22
【问题描述】：

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

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

工作 jsfiddle：

http://jsfiddle.net/bo4h7t6c/

<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>

【问题讨论】：

标签： jquery css pseudo-element featherlight.js

【解决方案1】：

你之前的 z-index 为 9，大于内部项目，所以尝试使用 before psuedo class 到内部 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>

【讨论】：

【解决方案2】：

有一个简单的技巧，

您可以添加到:before 伪两个css 属性user-select: none;pointer-events: none; 这将使按钮就像它不存在一样，所以当用户点击它时，他将实际点击视频并且它会播放。因此，您可以将按钮放在视频中的任何位置，它仍然可以工作。

查看更新后的jsFiddle。

【讨论】：

谢谢 - 小提琴完美无缺。如果可以不止一个，我会正确标记它！
没关系，很高兴听到它有帮助:)

【解决方案3】：

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

JSFiddle

【讨论】：