Result
動画をあらかじめ再生しておいて一部だけ見せる事でユーザーに動画閲覧を促す、みたいなやつ
JavaScriptはYoutubeのミュート等に使用しているものでUIには使用していませんので基本的にはCSSのみで実装されています
コードはちょっと長いのでCodepenをご参照ください。clip-pathとtransitionが鍵となります
html
<div class="wrapper">
<input type="checkbox">
<div class="video">
<div id="youtube"></div>
</div>
<div class="text">
<span data-text="動画を見る"></span>
</div>
</div>
