Full Screen Video Feed

<div class="video-container">
 <video id="videoElement" autoplay="" muted="" playsinline="" webkit-playsinline="" controls="" controlslist="nodownload nofullscreen noremoteplayback"></video>
</div>

.video-container {
 position: relative;
 width: 100%;
 height: 100vh;
 /* Full screen height */
 background-color: black;
 display: flex;
 justify-content: center;
 align-items: center;
 overflow: hidden;
}
video {
 width: auto;
 height: 100%;
 object-fit: cover;
 /* Maintain aspect ratio while covering */
}

// Get video element
const video = document.getElementById("videoElement");
// Extract params passed from VajroSDK (or fallback)
const { videoSrc, poster } = typeof params !== "undefined" ? params : {};
// Dynamically assign source and poster
if (video && videoSrc) {
 video.src = videoSrc;
 if (poster) video.setAttribute("poster", poster);
}
/**
* ✅ Resize the block via VajroSDK
*/
async function resizeBlock() {
 try {
   await VajroSDK.actions.resizeBlock();
   console.log("📏 Resized block.");
 } catch (error) {
   console.error("❌ Resize failed:", error);
 }
}
/**
* ✅ Setup listeners for state changes
*/
if (video) {
 video.addEventListener("loadedmetadata", () => {
   resizeBlock();
   video.play().catch((e) => console.warn("⚠️ Autoplay failed:", e));
 });
 video.addEventListener("play", resizeBlock);
 video.addEventListener("pause", resizeBlock);
 video.addEventListener("ended", resizeBlock);
 // Optional: enable tap-to-play on iOS
 video.addEventListener("click", () => {
   video.muted = false;
   video.play().catch((e) => console.warn("⚠️ Play error:", e));
 });
}