Skip to content

Instantly share code, notes, and snippets.

@MFathurrohmanMauludin
Created October 12, 2024 13:42
Show Gist options
  • Select an option

  • Save MFathurrohmanMauludin/fcb6c88bf147e0f0752ebb11b2b6c1c6 to your computer and use it in GitHub Desktop.

Select an option

Save MFathurrohmanMauludin/fcb6c88bf147e0f0752ebb11b2b6c1c6 to your computer and use it in GitHub Desktop.
How to Use lity.js
<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>
<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>
* {
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%;
}
}
<link href="https://cdn.jsdelivr.net/npm/lity@2.4.1/dist/lity.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment