这是因为overflow是可见的，但视频是隐藏的，因为你使用的是display: none。切换display属性时，视频将立即显示。
您真正需要做的就是将overflow: hidden添加到.video__player，但我不会切换display，因为这不是必要的。

$(document).ready(function(){
    $(".video" ).click(function() {
        document.getElementById("video__player").style.maxHeight = "45vw";
    });
});

.video__player {overflow: hidden; width: 80vw; max-width: 560px; max-height: 0; transition: max-height 0.5s ease-in-out; -webkit-transition: max-height 0.5s ease-in-out; margin: auto;}
iframe {width: 100%; height: 100%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="video__container animated fadeInDownShort slow">
                            <a class="h6 video clickable">Watch the video <img class="play-btn" src="assets/kbd-icon-play.svg"></a>
                        </div>
                        <div class="video__player" id="video__player">
                            <br><br>
                            <iframe src="https://www.youtube.com/embed/SIaFtAKnqBU?autoplay=1" frameborder="0" allowfullscreen></iframe>
                        </div>

可以使用jQuery**.fadeIn（）**方法

$(document).ready(function() {
  $(".video").click(function() {
    $('.video__player').fadeIn(500, function() {
      $(".video__player").addClass("expanded");
      document.getElementById("video__player").style.maxHeight = "45vw";
    });
  });
});

.video__player {
  display: none;
  width: 80vw;
  max-width: 560px;
  max-height: 0;
  transition: max-height 0.5s ease-in-out;
  -webkit-transition: max-height 0.5s ease-in-out;
  margin: auto;
}

iframe {
  width: 100%;
  height: 100%;
}

.expanded {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="video__container animated fadeInDownShort slow">
  <a class="h6 video clickable">Watch the video <img class="play-btn" src="assets/kbd-icon-play.svg"></a>
</div>
<div class="video__player" id="video__player">
  <br><br>
  <iframe src="https://www.youtube.com/embed/SIaFtAKnqBU?autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>

动画不显示项目显示：无.如果你想要显示动画，应该把超时.像这样的代码：

setTimeout(function(){
    document.getElementById("video__player").style.maxHeight = "45vw";
}, 10)

字符串