点击后显示并开始隐藏视频

Question

我需要一种简单的方法来用图片覆盖 youtube 视频，当我点击它时，视频应该会显示并开始播放。

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

我尝试在点击时更改 CSS，但没有成功。它适用于 css :hover 效果，但不适用于 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>

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