slickスライダーで静止画とyoutube（自動再生）をスライドさせたい

Question

https://wk-partners.co.jp/homepage/blog/hpseisaku/javascript/slide_movie/

こちらのサイトを参考に
slickスライダーで静止画とyoutube（自動再生）をスライドさせたいです。

参考サイトのcssを使用すると、
youtubeの高さが1pxほどの黒いラインだけが見えている状態です。

.slick-slide iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

のheight:100%　を　height:100vh　で試したところ表示されるのですが
youtubeが親要素に対し中央に表示されず、youtubeの黒枠が入り込んでしまう状態です。

参考サイトの記述が間違っているのでしょうか？

親要素に対し、100%フィットさせて表示させたいのでご教授いただけると助かります。