視頻響應不起作用

Question

我以這種方式在博客上插入了一個視頻響應。

CSS

.flex-video { 
position: relative; 
padding-top: 25px; 
padding-bottom: 67.5%; 
height: 0; 
margin-bottom: 16px; 
overflow: hidden; 
} 

.flex-video.widescreen { padding-bottom: 57.25%; } 
.flex-video.vimeo { padding-top: 0; } 

.flex-video iframe, 
.flex-video object, 
.flex-video embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 
@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) { 
    .flex-video { padding-top: 0; } 
} 

JS

$(document).ready(function() { 
    $('iframe').each(function() { 
    $(this).wrap('<div class="flex-video"></div>'); 
     }); 
}); 

現在我必須插入一個jQuery動畫隱藏的視頻，下面這個教程。

http://www.ssdtutorials.com/tutorials/title/show-hide-div-jquery.html

jQuery的效果的作品，但在這樣的視頻是沒有反應。

Answer 1

您的div#wr有固定寬度。只是刪除它，例如

#wr { 
    margin: 0px auto; 
    text-align: left; 
} 

此外，jQuery代碼可以簡化爲這樣：

$(document).ready(function() { 
    $('iframe').each(function() { 
     $(this).wrap('<div class="flex-video"></div>'); 
    }); 

    if ($('div.trigger')) { 
     $('div.trigger').click(function (e) { 
      $(this).toggleClass('open') 
       .toggleClass('close') 
       .next() 
       .slideToggle(100); 

      e.preventDefault(); 
     }); 
    } 
}); 

全碼：JSFiddle

Answer 2

使用max-width代替width

https://jsfiddle.net/reeyz2Ly/

$(document).ready(function() { 
 
    $('iframe').each(function() { 
 
    $(this).wrap('<div class="flex-video"></div>'); 
 
    }); 
 
}); 
 

 

 

 

 

 
$(document).ready(function() { 
 
\t \t 
 
\t if($('div.trigger').length > 0) { 
 
\t \t $('div.trigger').click(function() { 
 
\t \t \t if ($(this).hasClass('open')) { 
 
\t \t \t \t $(this).removeClass('open'); 
 
\t \t \t \t $(this).addClass('close'); 
 
\t \t \t \t $(this).next().slideDown(100); 
 
\t \t \t \t return false; 
 
\t \t \t } else { 
 
\t \t \t \t $(this).removeClass('close'); 
 
\t \t \t \t $(this).addClass('open'); 
 
\t \t \t \t $(this).next().slideUp(100); 
 
\t \t \t \t return false; 
 
\t \t \t } \t \t \t 
 
\t \t }); 
 
\t } 
 
\t 
 
});

.flex-video { 
 
    position: relative; 
 
    padding-top: 25px; 
 
    padding-bottom: 67.5%; 
 
    height: 0; 
 
    margin-bottom: 16px; 
 
    overflow: hidden; 
 
} 
 

 
.flex-video.widescreen { padding-bottom: 57.25%; } 
 
.flex-video.vimeo { padding-top: 0; } 
 

 
.flex-video iframe, 
 
.flex-video object, 
 
.flex-video embed { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) { 
 
    .flex-video { padding-top: 0; } 
 
} 
 

 

 

 

 

 
#wr { 
 
\t max-width:800px; 
 
\t margin: 0px auto; 
 
\t text-align: left; 
 
} 
 
.trigger,.trigger a { 
 
\t display: block; 
 
\t max-width: 680px; 
 
\t height: 100px; 
 
\t text-indent: -999999em; 
 
\t overflow: hidden; 
 
} 
 
.trigger { 
 
\t background: url(http://rtse.co.uk/images/clickhere.png) no-repeat 0px 0px; 
 
} 
 
.close { 
 
\t background: url(http://i.imgur.com/J3iA56c.png) no-repeat 0px 0px; 
 
} 
 
.cnt { 
 
\t display: none; 
 
} 
 
.cl { 
 
\t width: 100%; 
 
\t clear: both; 
 
\t line-height: 0px; 
 
\t font-size: 0px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<!--Responsive video doesn't work--> 
 

 
<div id="wr"> 
 
<div class="trigger open"><a href="#">Open</a></div> 
 
<div class="cnt"> 
 
<center><iframe allowfullscreen="" frameborder="0" height="480" src="//www.youtube.com/embed/inrmCnUsdak?rel=0" width="640"></iframe></center> 
 
</div></div> 
 

 
<br/> 
 
<br/> 
 
<br/> 
 

 
<!--Responsive video works--> 
 

 
<iframe allowfullscreen="" frameborder="0" height="480" src="https://www.youtube.com/embed/inrmCnUsdak?rel=0" width="640"></iframe>