Description
<!-- Floating IG Reel (SHOPLINE) - 9:16 poster + click to Instagram -->
<style>
.ig-float {
position: fixed;
left: 16px;
bottom: 16px;
width: 150px;
height: 266px; /* 9:16 */
z-index: 99999;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,.18);
background: #111;
transform: translateZ(0);
}
.ig-float.is-expanded {
width: min(240px, calc(100vw - 32px));
height: calc(min(240px, calc(100vw - 32px)) * 16 / 9); /* 9:16 */
height: calc(min(240px, calc(100vw - 32px)) * 16 / 9);
}
/* 上面那行是橫向公式；直式 9:16 正確應該是：height = width * 16/9? 不對。
直式 9:16 => height = width * 16/9 (沒錯，因為高是16、寬是9) */
.ig-float__hit {
position: absolute;
inset: 0;
display: block;
cursor: pointer;
}
.ig-float__poster {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
filter: contrast(1.02) saturate(1.02);
}
.ig-float__play {
position: absolute;
left: 50%;
top: 50%;
width: 54px;
height: 54px;
transform: translate(-50%, -50%);
border-radius: 999px;
background: rgba(0,0,0,.55);
backdrop-filter: blur(6px);
display: grid;
place-items: center;
pointer-events: none;
}
.ig-float__play:before {
content: "";
display: block;
margin-left: 4px;
width: 0;
height: 0;
border-left: 16px solid rgba(255,255,255,.95);
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
.ig-float__btn {
position: absolute;
top: 8px;
width: 28px;
height: 28px;
border: 0;
border-radius: 999px;
background: rgba(0,0,0,.55);
color: #fff;
cursor: pointer;
display: grid;
place-items: center;
backdrop-filter: blur(6px);
}
.ig-float__btn:hover { background: rgba(0,0,0,.72); }
.ig-float__btn--close { right: 8px; }
.ig-float__btn--toggle { left: 8px; }
.ig-float__badge {
position: absolute;
left: 10px;
bottom: 10px;
padding: 6px 10px;
font-size: 12px;
line-height: 1;
color: #fff;
background: rgba(0,0,0,.55);
border-radius: 999px;
backdrop-filter: blur(6px);
pointer-events: none;
}
@media (max-width: 430px) {
.ig-float { left: 12px; bottom: 12px; width: 130px; height: 231px; }
}
</style>
<div class="ig-float" id="igFloat" aria-label="Instagram Reel floating card">
<a class="ig-float__hit" id="igFloatLink" href="#" target="_blank" rel="noopener"></a>
<img class="ig-float__poster" id="igFloatPoster" alt="Instagram Reel preview" />
<div class="ig-float__play" aria-hidden="true"></div>
<button class="ig-float__btn ig-float__btn--toggle" id="igFloatToggle" type="button" aria-label="Expand">⤢</button>
<button class="ig-float__btn ig-float__btn--close" id="igFloatClose" type="button" aria-label="Close">×</button>
<div class="ig-float__badge">看穿搭影片 ↗</div>
</div>
<script>
(function () {
const STORAGE_KEY = "igFloatDismissed_v1";
const IG_URL = "https://www.instagram.com/reel/XXXXXXXXXXX/"; // ← 改成你的 IG Reel 連結
const POSTER_URL = "https://YOUR-IMAGE-URL.jpg"; // ← 改成封面圖（建議上傳到 SHOPLINE 檔案庫）
const el = document.getElementById("igFloat");
const link = document.getElementById("igFloatLink");
const poster = document.getElementById("igFloatPoster");
const btnClose = document.getElementById("igFloatClose");
const btnToggle = document.getElementById("igFloatToggle");
if (localStorage.getItem(STORAGE_KEY) === "1") {
el.remove();
return;
}
link.href = IG_URL;
poster.src = POSTER_URL;
btnClose.addEventListener("click", (e) => {
e.preventDefault();
localStorage.setItem(STORAGE_KEY, "1");
el.remove();
});
btnToggle.addEventListener("click", (e) => {
e.preventDefault();
el.classList.toggle("is-expanded");
btnToggle.textContent = el.classList.contains("is-expanded") ? "⤡" : "⤢";
});
})();
</script>
