How to Use lity.js

how-to-use-lity-js.markdown

How to Use lity.js

A Pen by M Fathurrohman Mauludin on CodePen.

License.

index.html

<div class="content">
  
  <div class="content__item">
    <h2 class="content__ttl">通常の使用例(aタグのみ)</h2>
    <a href="//www.youtube.com/watch?v=XSGBVzeBUbk" class="content__link" data-lity>クリックでポップアップ</a>
  </div>
  

  <div class="content__item">
    <h2 class="content__ttl">NG例</h2>
    <p class="content__txt">そのまま再生される</p>
    <a href="https://youtu.be/WGdVX9fCHOI" class="ytube content__movie" data-lity>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/Nxwt_s1lM04" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </a>
  </div>
  
  <div class="content__item">
    <h2 class="content__ttl">OK例</h2>
    <p class="content__txt">ポップアップ再生する</p>
    <div class="ytube content__movie">
      <iframe width="560" height="315" src="https://www.youtube.com/embed/Nxwt_s1lM04" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      <a href="https://www.youtube.com/embed/Nxwt_s1lM04" data-lity></a>
    </div>
  </div>
</div>

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lity/2.4.1/lity.min.js"></script>

style.scss

* {
  margin: 0;
  padding: 0;
}

body{
  font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic Pro N', Meiryo, sans-serif;
  line-height: 1.68;
}

.content {
  max-width: 600px;
  margin: 0 auto;
  padding: 40px;
  &__item {
    padding: 40px 0;
  }
  &__ttl {
    font-size: 28px;
    font-weight: bold;
    text-align: center;
  }
  &__link {
    display: block;
    text-align: center;
  }
  &__txt {
    text-align: center;
    margin-top: 10px;
  }
  &__movie {
    margin-top: 20px;
  }
}

.ytube {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-top: 56.25%;
  position: relative;
  width: 100%;
   iframe {
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
    }
  a {
      /* lityを動かすためにiframeを覆う */
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
    }
}

styles

<link href="https://cdn.jsdelivr.net/npm/lity@2.4.1/dist/lity.min.css" rel="stylesheet" />