我想显示youtube嵌入溢出的，固定的高度div，当用户点击显示更多按钮我想删除溢出和高度和youtube视频应该出现 .

下面的例子在firefox上运行，但youtube在chrome中嵌入重叠 .

请看我的小提琴：https://jsfiddle.net/6v6op6bf/18/

$(document).ready(function() {
  $(".js-more").on("click", function(ev) {
    $(".truncated").removeClass("truncated");
  });
});

.w {
  width: 800px;
  height: 500px;
  background-color: yellow;
  margin: 0 auto;
  position: relative;
}

.truncated {
  position: relative;
  max-height: 100px;
  overflow: hidden;
  background-color: green;
}

.max {
  position: relative;
  max-width: 500px;
  margin: 0 auto;
}

html,
body {
  position: relative;
}

.more-buttons {
  position: relative;
  display: block;
  width: 100%;
  margin: auto 0;
  text-align: center;
}

.more-btn {
  position: absolute;
  text-align: center;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<html xmlns="http://www.w3.org/1999/xhtml">

<body>
  <div class="w">
    <div class="truncated">
      <div class="max">
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/VtN_v8EvPbs?wmode=opaque" frameborder="0"></iframe>
        </div>
      </div>
    </div>
    <div class="more-buttons">
      <h2 class="more-btn"><a href="#" class="js-more">more</a></h2>
    </div>
  </div>
</body>
</html>
html css google-chrome youtube