fix: 影片改縮圖連結避免廣告
This commit is contained in:
@@ -172,17 +172,45 @@
|
||||
background: #d8cbae;
|
||||
}
|
||||
|
||||
.hero-photo iframe {
|
||||
.hero-photo a.hero-video-link {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.hero-photo a.hero-video-link img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center
|
||||
}
|
||||
|
||||
.hero-photo .play {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 177.78vh;
|
||||
min-height: 56.25vw;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, .92);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transform: translate(-50%, -50%);
|
||||
border: 0;
|
||||
pointer-events: none;
|
||||
transition: transform .2s ease;
|
||||
}
|
||||
|
||||
.hero-photo .play::after {
|
||||
content: "";
|
||||
border-left: 16px solid #161310;
|
||||
border-top: 10px solid transparent;
|
||||
border-bottom: 10px solid transparent;
|
||||
margin-left: 5px
|
||||
}
|
||||
|
||||
.hero-photo a.hero-video-link:hover .play {
|
||||
transform: translate(-50%, -50%) scale(1.08)
|
||||
}
|
||||
|
||||
.hero-photo .cap {
|
||||
@@ -715,9 +743,12 @@
|
||||
<span class="tag">KIM JAEDUCK</span>
|
||||
</div>
|
||||
<div class="hero-photo">
|
||||
<iframe
|
||||
src="https://www.youtube.com/embed/m7Zt_p9S-yg?start=179&autoplay=1&mute=1&loop=1&playlist=m7Zt_p9S-yg&controls=0&modestbranding=1&rel=0&showinfo=0&playsinline=1&iv_load_policy=3"
|
||||
title="金在德舞台片段" allow="autoplay; encrypted-media" loading="lazy"></iframe>
|
||||
<a class="hero-video-link" href="https://youtu.be/m7Zt_p9S-yg?t=179" target="_blank" rel="noopener noreferrer"
|
||||
aria-label="前往 YouTube 觀看完整片段">
|
||||
<img src="https://img.youtube.com/vi/m7Zt_p9S-yg/maxresdefault.jpg" alt="金在德舞台片段"
|
||||
onerror="this.onerror=null;this.src='https://img.youtube.com/vi/m7Zt_p9S-yg/hqdefault.jpg'">
|
||||
<span class="play"></span>
|
||||
</a>
|
||||
<span class="cap">BLACK KIES · RAP / DANCE</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user