展開DIV和點擊圖片播放視頻

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

你需要做一些微調，但一開始就在這裏。

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); 
 
    }); 
 
});

* { 
 
    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; 
 
}

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