✨ Live Web Story Generator
This story works on plus ui 3.0.0 Blogger theme · Progress auto-saved
Story Meta
Usually same as cover image
Used in the Blogger thumbnail comment block at the top of the generated code
Slides
0 slidesGenerated Code
Live Preview
Slide 1 / 1
Copied!
Here is a demo
Demo
<!-- ===== COURTESY: www.authormasoncarter.com ===== -->
<div class="mc-stories-root" id="mcStoriesRoot">
<div class="mc-stories-bar" id="mcStoriesBar"></div>
<div class="mc-stories-player" id="mcStoriesPlayer" aria-hidden="true">
<div class="mc-stories-progress" id="mcProgress"></div>
<button class="mc-stories-close" id="mcCloseBtn" aria-label="Close">×</button>
<button class="mc-stories-share" id="mcShareBtn" aria-label="Share" title="Share">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>
</button>
<div class="mc-stories-header">
<img class="mc-stories-avatar" id="mcPlayerAvatar" src="" alt="">
<span class="mc-stories-title" id="mcPlayerTitle"></span>
</div>
<div class="mc-stories-media" id="mcMedia"></div>
<a class="mc-stories-outlink" id="mcOutlink" href="#" target="_blank" rel="noopener noreferrer" style="display:none">Learn More</a>
<div class="mc-stories-tap-left" id="mcTapLeft"></div>
<div class="mc-stories-tap-right" id="mcTapRight"></div>
</div>
</div>
<style>
.mc-stories-root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;box-sizing:border-box}.mc-stories-root *,.mc-stories-root *::before,.mc-stories-root *::after{box-sizing:border-box}.mc-stories-root .mc-stories-bar{display:flex;gap:12px;overflow-x:auto;padding:8px 4px 16px;scrollbar-width:none;-ms-overflow-style:none}.mc-stories-root .mc-stories-bar::-webkit-scrollbar{display:none}.mc-stories-root .mc-story-card{flex:0 0 auto;width:110px;height:180px;border-radius:12px;overflow:hidden;position:relative;cursor:pointer;background:#111;box-shadow:0 2px 8px rgba(0,0,0,.15);user-select:none}.mc-stories-root .mc-story-card-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.mc-stories-root .mc-story-card-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.25) 0%,transparent 40%,rgba(0,0,0,.65) 100%)}.mc-stories-root .mc-story-logo{position:absolute;top:8px;left:8px;width:28px;height:28px;border-radius:50%;object-fit:cover;border:1.5px solid rgba(255,255,255,.9);background:#fff;z-index:2}.mc-stories-root .mc-story-card-title{position:absolute;bottom:10px;left:8px;right:8px;color:#fff;font-size:12px;font-weight:600;line-height:1.25;text-shadow:0 1px 3px rgba(0,0,0,.7);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;z-index:2}.mc-stories-root .mc-stories-player{position:fixed;inset:0;z-index:99999;background:#000;display:none;flex-direction:column;color:#fff;touch-action:none;overscroll-behavior:none;width:100%;height:100%}.mc-stories-root .mc-stories-player.active{display:flex}.mc-stories-root .mc-stories-player:fullscreen,.mc-stories-root .mc-stories-player:-webkit-full-screen{width:100vw;height:100vh;background:#000}.mc-stories-root .mc-stories-progress{display:flex;gap:4px;padding:10px 8px 0;position:absolute;top:0;left:0;right:0;z-index:10}.mc-stories-root .mc-progress-bar{flex:1;height:2.5px;background:rgba(255,255,255,.35);border-radius:2px;overflow:hidden}.mc-stories-root .mc-progress-fill{height:100%;width:0;background:#fff;border-radius:2px}.mc-stories-root .mc-stories-header{position:absolute;top:22px;left:12px;right:90px;display:flex;align-items:center;gap:10px;z-index:10;pointer-events:none}.mc-stories-root .mc-stories-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;border:1.5px solid #fff}.mc-stories-root .mc-stories-title{font-size:14px;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mc-stories-root .mc-stories-close,.mc-stories-root .mc-stories-share{position:absolute;top:16px;z-index:20;background:0 0;border:none;color:#fff;cursor:pointer;padding:6px;text-shadow:0 1px 4px rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center}.mc-stories-root .mc-stories-close{right:10px;font-size:30px;line-height:1}.mc-stories-root .mc-stories-share{right:48px}.mc-stories-root .mc-stories-media{flex:1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;will-change:transform;transition:transform .28s cubic-bezier(.25,.8,.25,1)}.mc-stories-root .mc-stories-media.dragging{transition:none}.mc-stories-root .mc-stories-media img,.mc-stories-root .mc-stories-media video{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;user-select:none;pointer-events:none}.mc-stories-root .mc-stories-outlink{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:15;display:none;align-items:center;justify-content:center;min-width:160px;max-width:80%;padding:12px 28px;background:#fff;color:#111;font-size:15px;font-weight:600;text-decoration:none;border-radius:999px;box-shadow:0 4px 18px rgba(0,0,0,.35);white-space:nowrap}.mc-stories-root .mc-stories-outlink.visible{display:flex}.mc-stories-root .mc-stories-tap-left,.mc-stories-root .mc-stories-tap-right{position:absolute;top:0;bottom:0;width:40%;z-index:5}.mc-stories-root .mc-stories-tap-left{left:0}.mc-stories-root .mc-stories-tap-right{right:0}.mc-stories-root .mc-spinner{width:36px;height:36px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:mc-spin .7s linear infinite}@keyframes mc-spin{to{transform:rotate(360deg)}}.mc-stories-root .mc-empty{padding:20px;text-align:center;color:#666;font-size:14px}
</style>
<script>
(function(){"use strict";const FEED_URL="https://www.authormasoncarter.com/feeds/posts/default/-/Story?alt=json&max-results=20",SLIDE_DURATION=7000,LOGO_URL="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvkyEuYRNXw1uhdPqOF3taFS8ebrDkBTT41OzNLMOB57KrgShPNiWswnWu0vRbc4W8FmzxZykV1skvT3jNbTUPnZqVwc6s0ppBeQiyYcl2lt-InURZoC4IiAfD9vLUZevZGIhxz4-W49kx1atYrtaHkkI0h2T6j9YgTQcrVhwv-d3CaL5vlzDelvQa/w150-h150-p-k-no-nu-rw-e90/Vintage%20Old%20Man%20Smoking%20Pipe%20Logo%20Stamp.png",SWIPE_THRESHOLD=80;const root=document.getElementById("mcStoriesRoot"),bar=document.getElementById("mcStoriesBar"),player=document.getElementById("mcStoriesPlayer"),progressEl=document.getElementById("mcProgress"),mediaEl=document.getElementById("mcMedia"),titleEl=document.getElementById("mcPlayerTitle"),avatarEl=document.getElementById("mcPlayerAvatar"),closeBtn=document.getElementById("mcCloseBtn"),shareBtn=document.getElementById("mcShareBtn"),outlinkBtn=document.getElementById("mcOutlink"),tapLeft=document.getElementById("mcTapLeft"),tapRight=document.getElementById("mcTapRight");let stories=[],currentStory=0,currentSlide=0,timer=null,startTime=0,remaining=SLIDE_DURATION,isPaused=false,touchStartX=0,touchStartY=0,isDragging=false,currentTranslateY=0,currentMediaEl=null;
function requestTrueFullscreen(el){return el.requestFullscreen?el.requestFullscreen():el.webkitRequestFullscreen?el.webkitRequestFullscreen():el.msRequestFullscreen?el.msRequestFullscreen():Promise.resolve()}
function exitTrueFullscreen(){return document.exitFullscreen?document.exitFullscreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.msExitFullscreen?document.msExitFullscreen():Promise.resolve()}
function isFullscreen(){return!!(document.fullscreenElement||document.webkitFullscreenElement||document.msFullscreenElement)}
function extractMedia(html){const items=[];let m;const imgRe=/<amp-img[^>]+src=["']([^"']+)["']/gi;while((m=imgRe.exec(html))!==null){if(!items.find(i=>i.src===m[1]))items.push({type:"image",src:m[1]})}const videoRe=/<amp-video[^>]*>[\s\S]*?<source[^>]+src=["']([^"']+)["']/gi;while((m=videoRe.exec(html))!==null)items.push({type:"video",src:m[1]});const plainVideo=/<video[^>]+src=["']([^"']+)["']/gi;while((m=plainVideo.exec(html))!==null)items.push({type:"video",src:m[1]});return items}
function extractPoster(html){const m=html.match(/poster-portrait-src=['"]([^'"]+)['"]/);return m?m[1]:null}
function extractOutlink(html){let m=html.match(/<amp-story-page-outlink[^>]*>[\s\S]*?<a[^>]+href=["']([^"']+)["'][^>]*>([^<]+)<\/a>/i);if(m)return{href:m[1],text:m[2].trim()||"Learn More"};m=html.match(/href=["'](https?:\/\/[^"']+)["'][^>]*>\s*Learn More\s*</i);if(m)return{href:m[1],text:"Learn More"};return null}
async function loadStories(){try{const res=await fetch(FEED_URL);if(!res.ok)throw new Error("Network error");const data=await res.json();const entries=data.feed.entry||[];stories=entries.map(entry=>{const title=(entry.title.$t||"").trim();const link=(entry.link.find(l=>l.rel==="alternate")||{}).href||"#";const content=entry.content.$t||"";const allMedia=extractMedia(content);const poster=extractPoster(content)||(allMedia[0]&&allMedia[0].src)||"";const slides=allMedia.length>1?allMedia.slice(1):allMedia;const outlink=extractOutlink(content);return{title,link,poster,slides,outlink}}).filter(s=>s.slides.length>0);renderBar()}catch(err){console.error("Stories fetch failed:",err);bar.innerHTML='<div class="mc-empty">Unable to load stories.</div>'}}
function renderBar(){if(!stories.length){bar.innerHTML='<div class="mc-empty">No stories yet.</div>';return}bar.innerHTML=stories.map((s,i)=>`<div class="mc-story-card" data-index="${i}"><img class="mc-story-card-bg" src="${s.poster}" alt="" loading="lazy"><div class="mc-story-card-overlay"></div><img class="mc-story-logo" src="${LOGO_URL}" alt="Logo"><div class="mc-story-card-title">${escapeHtml(s.title.replace(/: Story\s*$/i,""))}</div></div>`).join("");bar.querySelectorAll(".mc-story-card").forEach(el=>{el.addEventListener("click",()=>openPlayer(+el.dataset.index))})}
function escapeHtml(str){return str.replace(/[&<>"']/g,c=>({"&":"&","<":"<",">":">",'"':""","'":"'"}[c]))}
function preloadStory(index){if(index<0||index>=stories.length)return;const story=stories[index];story.slides.forEach(item=>{if(item.type==="image"){const img=new Image();img.src=item.src}else if(item.type==="video"){const link=document.createElement("link");link.rel="preload";link.as="video";link.href=item.src;document.head.appendChild(link)}})}
async function openPlayer(index){currentStory=index;currentSlide=0;player.classList.add("active");player.setAttribute("aria-hidden","false");document.body.style.overflow="hidden";try{await requestTrueFullscreen(player)}catch(e){}resetMediaTransform();showSlide();preloadStory(currentStory+1)}
async function closePlayer(){clearTimer();stopMedia();player.classList.remove("active");player.setAttribute("aria-hidden","true");document.body.style.overflow="";mediaEl.innerHTML="";hideOutlink();resetMediaTransform();if(isFullscreen()){try{await exitTrueFullscreen()}catch(e){}}}
function resetMediaTransform(){mediaEl.classList.remove("dragging");mediaEl.style.transform="translateY(0)";currentTranslateY=0}
function showOutlink(story){if(story.outlink&&story.outlink.href){outlinkBtn.href=story.outlink.href;outlinkBtn.textContent=story.outlink.text||"Learn More";outlinkBtn.classList.add("visible");outlinkBtn.style.display="flex"}else hideOutlink()}
function hideOutlink(){outlinkBtn.classList.remove("visible");outlinkBtn.style.display="none";outlinkBtn.href="#"}
function stopMedia(){if(currentMediaEl&¤tMediaEl.tagName==="VIDEO"){currentMediaEl.pause();currentMediaEl.removeAttribute("src");currentMediaEl.load()}currentMediaEl=null}
function showSlide(){const story=stories[currentStory];if(!story)return;stopMedia();titleEl.textContent=story.title.replace(/: Story\s*$/i,"");avatarEl.src=story.poster;progressEl.innerHTML=story.slides.map((_,i)=>`<div class="mc-progress-bar"><div class="mc-progress-fill" id="mcFill${i}"></div></div>`).join("");for(let i=0;i<currentSlide;i++){const fill=document.getElementById(`mcFill${i}`);if(fill)fill.style.width="100%"}if(currentSlide===story.slides.length-1)showOutlink(story);else hideOutlink();const item=story.slides[currentSlide];mediaEl.innerHTML='<div class="mc-spinner"></div>';if(item.type==="video"){const video=document.createElement("video");video.src=item.src;video.playsInline=true;video.muted=true;video.autoplay=true;video.loop=false;video.controls=false;video.setAttribute("playsinline","");video.setAttribute("webkit-playsinline","");video.onloadeddata=()=>{mediaEl.innerHTML="";mediaEl.appendChild(video);currentMediaEl=video;video.play().catch(()=>{});startTimer()};video.onerror=()=>{mediaEl.innerHTML='<div style="color:#fff;padding:20px;text-align:center">Video failed</div>';startTimer()}}else{const img=new Image();img.src=item.src;img.onload=()=>{mediaEl.innerHTML="";mediaEl.appendChild(img);currentMediaEl=img;startTimer()};img.onerror=()=>{mediaEl.innerHTML='<div style="color:#fff;padding:20px;text-align:center">Failed to load</div>';startTimer()}}}
function startTimer(){clearTimer();remaining=SLIDE_DURATION;startTime=Date.now();isPaused=false;const fill=document.getElementById(`mcFill${currentSlide}`);if(!fill)return;function tick(){if(isPaused)return;const elapsed=Date.now()-startTime;const pct=Math.min(100,(elapsed/remaining)*100);fill.style.width=pct+"%";if(pct>=100)nextSlide();else timer=requestAnimationFrame(tick)}timer=requestAnimationFrame(tick)}
function clearTimer(){if(timer)cancelAnimationFrame(timer);timer=null}
function pause(){if(isPaused)return;isPaused=true;remaining-=(Date.now()-startTime);clearTimer();if(currentMediaEl&¤tMediaEl.tagName==="VIDEO")currentMediaEl.pause()}
function resume(){if(!isPaused)return;isPaused=false;startTime=Date.now();startTimer();if(currentMediaEl&¤tMediaEl.tagName==="VIDEO")currentMediaEl.play().catch(()=>{})}
function nextSlide(){const story=stories[currentStory];if(currentSlide<story.slides.length-1){currentSlide++;showSlide()}else nextStory()}
function prevSlide(){if(currentSlide>0){currentSlide--;showSlide()}else prevStory()}
function nextStory(){if(currentStory<stories.length-1){currentStory++;currentSlide=0;animateStoryChange("up");preloadStory(currentStory+1)}else closePlayer()}
function prevStory(){if(currentStory>0){currentStory--;currentSlide=0;animateStoryChange("down")}else{resetMediaTransform();showSlide()}}
function animateStoryChange(direction){mediaEl.classList.remove("dragging");const distance=window.innerHeight;mediaEl.style.transform=direction==="up"?`translateY(-${distance}px)`:`translateY(${distance}px)`;setTimeout(()=>{mediaEl.style.transition="none";mediaEl.style.transform=direction==="up"?`translateY(${distance}px)`:`translateY(-${distance}px)`;mediaEl.offsetHeight;showSlide();requestAnimationFrame(()=>{mediaEl.style.transition="";mediaEl.style.transform="translateY(0)"})},280)}
async function shareCurrentStory(){const story=stories[currentStory];if(!story)return;const shareData={title:story.title.replace(/: Story\s*$/i,""),text:"Check out this story",url:story.link};if(navigator.share){try{await navigator.share(shareData)}catch(e){}}else{try{await navigator.clipboard.writeText(story.link);const original=shareBtn.innerHTML;shareBtn.innerHTML="✓";setTimeout(()=>{shareBtn.innerHTML=original},1500)}catch(e){prompt("Copy this link:",story.link)}}}
closeBtn.addEventListener("click",closePlayer);shareBtn.addEventListener("click",e=>{e.stopPropagation();shareCurrentStory()});outlinkBtn.addEventListener("click",e=>e.stopPropagation());tapLeft.addEventListener("click",e=>{e.stopPropagation();prevSlide()});tapRight.addEventListener("click",e=>{e.stopPropagation();nextSlide()});
player.addEventListener("pointerdown",e=>{if(e.target.closest(".mc-stories-close")||e.target.closest(".mc-stories-share")||e.target.closest(".mc-stories-outlink"))return;if(!isDragging)pause()});player.addEventListener("pointerup",()=>{if(!isDragging)resume()});player.addEventListener("pointerleave",()=>{if(!isDragging)resume()});player.addEventListener("pointercancel",()=>{if(!isDragging)resume()});
player.addEventListener("touchstart",e=>{touchStartX=e.changedTouches[0].screenX;touchStartY=e.changedTouches[0].screenY;isDragging=false;currentTranslateY=0;pause()},{passive:true});
player.addEventListener("touchmove",e=>{const dy=e.changedTouches[0].screenY-touchStartY;const dx=e.changedTouches[0].screenX-touchStartX;if(!isDragging&&Math.abs(dy)>12&&Math.abs(dy)>Math.abs(dx)){isDragging=true;mediaEl.classList.add("dragging")}if(isDragging){currentTranslateY=dy;mediaEl.style.transform=`translateY(${dy*.92}px)`}},{passive:true});
player.addEventListener("touchend",e=>{if(!isDragging){resume();return}const dy=currentTranslateY;mediaEl.classList.remove("dragging");if(Math.abs(dy)>SWIPE_THRESHOLD){if(dy<0)nextStory();else prevStory()}else{mediaEl.style.transform="translateY(0)";resume()}isDragging=false;currentTranslateY=0},{passive:true});
document.addEventListener("keydown",e=>{if(!player.classList.contains("active"))return;if(e.key==="Escape"){closePlayer();return}if(e.key==="ArrowUp"){e.preventDefault();prevStory()}if(e.key==="ArrowDown"){e.preventDefault();nextStory()}if(e.key==="ArrowLeft"){e.preventDefault();prevSlide()}if(e.key==="ArrowRight"){e.preventDefault();nextSlide()}});
document.addEventListener("fullscreenchange",()=>{if(!isFullscreen()&&player.classList.contains("active"))closePlayer()});
document.addEventListener("webkitfullscreenchange",()=>{if(!isFullscreen()&&player.classList.contains("active"))closePlayer()});
player.addEventListener("wheel",e=>e.preventDefault(),{passive:false});
document.addEventListener("visibilitychange",()=>{if(document.hidden)pause();else if(player.classList.contains("active"))resume()});
loadStories()})();
</script>
tab_3_content
tab_4_content
