需要弄清楚视频的 CSS 选择器

Question

我需要在视频中添加cursor: pointer，但它是在 jQuery 中设置的（用于海报图像并延迟自动播放。）它在 Inspector 中工作（视频显示在选择器：“元素”下。）我可以将cursor: pointer 添加到那里的视频中，但无法确定要使用的 CSS 选择器。

我试过了：

• 样式化视频标签、iframe 标签（在 css 中和直接在 jquery 中），
• 在 css 中使用带有 [ ] 括号的元素查询，
• 为父 div、其他 div 等设置样式

基于此我应该使用什么选择器？

这是我的代码：

jQuery(document).ready(function($) {
  $('.vidposter').on('click', function() {
    var element = $(this);
    var videoSRC = element.attr('data-videoSRC');
    var iframe = '<iframe width="570" height="321" src="' + videoSRC + '"></iframe>';
    element.html(iframe);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="vidposter" data-videoSRC="http://thesite.com/media/video.mp4" autoplay="true">
  <img src="https://placehold.it/570x321/" style="cursor:pointer">
</div>

Answer 1

.vidposter {cursor: pointer}

将此 CSS 应用到容器将意味着光标将出现在整个视频内容上

Answer 2

尝试这样的事情，使用视频元素以获得更多语义 html 和更好的可访问性，就像这样

<div id="vidposter">
  <video aria-title="my poster" controls>
    <source src="test1.mp4" type="video/mp4" />
  </video>
</div>

在 jQuery 部分试试这个

jQuery(document).ready(function($) {
  $('#vidposter').on('click', function() {
    $('#vidposter video source').attr('src', videoFile);
  });
});