Question

这是我的HTML：

<div id="wrapper">
  <div id="left-bg">
    <img class="play-button" src="/play-100x100.png" width="100" height="100" alt="play" title="play">

    <iframe id="iframe" width="1280" height="720" src="//www.youtube.com/embed/F0naUkyEkmM" data-autoplay-src="//www.youtube.com/embed/F0naUkyEkmM?autoplay=1"></iframe>
  </div>
  <div id="right-bg">
    <text
  </div>
</div>

这是我的jQuery：

jQuery(function($){
  $('#left-bg, #right-bg').click(
    function(){
      $(this).animate({'width': '100%'},600).siblings().animate({'width':'0'},600);
      $('<button class="show">Show all</button>')
        .appendTo('#wrapper');
    });

  $('.show').live('click',
    function(){
      $('#left-bg').animate(
        {
          'width': '50%'
        },600);
      $('#right-bg').animate(
        {
          'width': '50%'
        },600);
    $(this).remove();
  });
});

我想要的是将DIV分成两部分，这样当点击左侧DIV时它会扩展到全高并开始播放视频，同时用关闭按钮关闭它，视频暂停，左侧DIV重新获得它的正常高度和宽度。

Answer 1

你需要做一些微调，但开始就在这里。

＆＃13;

jQuery(function($) {
   $('#left-bg').click(
     function() {
       $(this).animate({
         'width': '100%'
       }, 600)
       $('#right-bg').animate({
         'width': '0%'
       }, 600);
       $('.show').fadeIn(600);
     });

   $('.show').on('click', function() {

     $('#left-bg').animate({
       'width': '50%'
     }, 600);
     $('#right-bg').animate({
       'width': '50%'
     }, 600);
     $(this).fadeOut(600);
   });
 });

＆＃13;

* {
  box-sizing: border-box;
}

#wrapper {
  width: 600px;
  height: 300px;
  position: relative;
  display: inline-block;
}

#left-bg,
#right-bg {
  width: 50%;
  float: left;
  display: inline-block;
  overflow: hidden;
}

iframe {
  width: 100%;
  height: 100%; 
}

img {
  position: absolute;
}

.show {
  display: none;
  position: absolute;
  right: 10px;
  top: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div id="left-bg">
    <img class="play-button" src="/play-100x100.png" width="100" height="100" alt="play" title="play">

    <iframe id="iframe" width="1280" height="720" src="//www.youtube.com/embed/F0naUkyEkmM" data-autoplay-src="//www.youtube.com/embed/F0naUkyEkmM?autoplay=1"></iframe>
  </div>
  <div id="right-bg">
    sdf
  </div>
  <button class="show">Close</button>
</div>

＆＃13;

Answer 2

根据您对NiZa的评论，答案... 您可以在用户点击播放按钮之前使用html5视频海报显示图像。

<video width="100%" height="100%" controls poster="images/image.png">
      <source src="videos/video.mp4" type="video/mp4">
      <source src="videos/video.ogg" type="video/ogg">
</video>

不客气。

展开div并在点击图片上播放视频

2 个答案: