Question

我需要一种简单的方法来覆盖带有图像的youtube视频，当我点击它时，视频应该显示并开始。

完成这项工作的最简单方法是什么？

我尝试在点击时进行css更改，但它无法解决问题。它适用于css：悬停效果，但不适用于jquery。？

<div id='videowrapper'>                                   
  <iframe id="video" width="560" height="315" src="http://www.youtube.com/embed/FLgkfNNBVj4?wmode=transparent&rel=0&showinfo=0&controls=0&hd=1&autohide=0" frameborder="0" allowfullscreen ></iframe>                            
</div>

#videowrapper{
    width:560px;
    height:315px;
    background:url("//");
    cursor:pointer;
    margin:100px -40px;
    float:right;
    border:1px solid white;

  }

  #video{

    opacity:0;

  }

  <script>
  $('#video').click(function(){
  $('#video').css('opacity','0');
  $('this').css('opacity','1');
  });
  </script>

Answer 1

您可以使用jQuery隐藏元素，然后在点击某些内容后显示它。

<div id="videowrapper">
  <div id="clickArea"></div>
  <iframe style="display:none" id="video" //blah ></iframe>
</div>

<script>
$(function () {
  $('#clickArea').on('click', function () {
    $('#video').show();
    $('#clickArea').hide();
  });
});
</script>

您需要在点击区域添加样式，这只是您可以执行的示例代码。

点击后显示并启动隐藏的视频

1 个答案: