動画を再生したまま一部だけチラ見せする

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>

via

Video button animation