To add a movie player in your website copy the bellow code and paste in your website section
<!doctype html>
<style>
body {
background: #f4f4f4;
margin: 0;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
margin-top: 20px;
}
#movieCatalog {
max-width: 800px;
margin: 20px auto;
padding: 0 10px;
}
.vertical-movies {
display: flex;
flex-direction: column;
gap: 20px;
}
.movie {
background: #fff;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
transition: transform 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
padding-bottom: 10px;
}
.movie:hover {
transform: scale(1.02);
}
.movie img {
width: 100%;
height: auto;
object-fit: cover;
border-bottom: 3px solid #3498db;
}
.movie h4 {
margin: 10px;
font-size: 16px;
color: #333;
text-align: center;
}
.modal {
display: none;
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.9);
z-index: 9999;
}
.modal-content {
position: relative;
width: 90%;
max-width: 800px;
margin: 60px auto;
background: #000;
border-radius: 10px;
padding: 10px;
}
.modal .close {
position: absolute;
top: 10px;
right: 20px;
font-size: 28px;
color: white;
cursor: pointer;
}
#videoContainer {
position: relative;
width: 100%;
padding-top: 56.25%;
}
#videoPlayer,
#ytIframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 10px;
}
#loadingSpinner {
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
margin: -20px 0 0 -20px;
border: 4px solid #3498db;
border-top: 4px solid transparent;
border-radius: 50%;
animation: spin 1s linear infinite;
z-index: 10;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
#loadingText {
position: absolute;
top: calc(50% + 30px);
left: 50%;
transform: translateX(-50%);
color: #fff;
font-size: 16px;
z-index: 10;
}
</style>
<h1>Watch Latest New Movie Online</h1>
<p>🎬 Want to request a new movie? or not play video ? <a href="https://chat.whatsapp.com/H0IcnvhT6dYAgVoRy96408" target="_blank">Click here to join our TheDaily71 WhatsApp group!</a></p>
<div id="movieCatalog">
<div class="vertical-movies" id="movieList"></div>
<div class="modal" id="videoModal">
<span class="close" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="loading-spinner" id="loadingSpinner"></div>
<div id="loadingText">Wait until video plays...</div>
<div id="videoContainer">
<video id="videoPlayer" controls autoplay></video>
<iframe id="ytIframe" frameborder="0" allowfullscreen style="display: none"></iframe>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
const movies = [
{
title: "iHostage",
thumbnail: "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQCwx5_osPDag5zjm7IGPW2rHvB-o3rvlRb_GCxcO2Apk5uy4eQYYJmrAFYrYuTodlT9r7G",
videoUrl: "https://cdn4505.denni348sof.com/stream2/i-cdn-0/4ebd9cc51a15313f95f8e65fe7e3e461/MJTMsp1RshGTygnMNRUR2N2MSlnWXZEdMNDZzQWe5MDZzMmdZJTO1R2RWVHZDljekhkSsl1VwYnWtx2cihVT25EVndXT6xmaNRUT65keNlXTUNmMNpWQ390RJRjT6lVNORkVt50RVJTTqVUP:1745125523:128.106.158.241:cad53109944d1af86e4aa07fcae97c93127addcf244ccca3382f547583d7c140/index.m3u8"
},
];
const movieList = document.getElementById("movieList");
const videoModal = document.getElementById("videoModal");
const videoPlayer = document.getElementById("videoPlayer");
const ytIframe = document.getElementById("ytIframe");
const loadingSpinner = document.getElementById("loadingSpinner");
const loadingText = document.getElementById("loadingText");
function closeModal() {
videoModal.style.display = "none";
videoPlayer.pause();
videoPlayer.src = "";
ytIframe.src = "";
ytIframe.style.display = "none";
videoPlayer.style.display = "block";
}
function openVideo(videoUrl) {
videoModal.style.display = "block";
loadingSpinner.style.display = "block";
loadingText.style.display = "block";
if (videoUrl.includes("youtube.com") || videoUrl.includes("youtu.be")) {
ytIframe.src = videoUrl;
ytIframe.style.display = "block";
videoPlayer.style.display = "none";
loadingSpinner.style.display = "none";
loadingText.style.display = "none";
} else {
if (Hls.isSupported()) {
const hls = new Hls();
hls.loadSource(videoUrl);
hls.attachMedia(videoPlayer);
hls.on(Hls.Events.MANIFEST_PARSED, function () {
videoPlayer.play();
});
} else if (videoPlayer.canPlayType("application/vnd.apple.mpegurl")) {
videoPlayer.src = videoUrl;
videoPlayer.play();
}
videoPlayer.oncanplay = () => {
loadingSpinner.style.display = "none";
loadingText.style.display = "none";
};
}
}
movies.forEach((movie) => {
const movieDiv = document.createElement("div");
movieDiv.classList.add("movie");
movieDiv.innerHTML = `
<img src="${movie.thumbnail}" alt="${movie.title}" />
<h4>${movie.title}</h4>
`;
movieDiv.onclick = () => openVideo(movie.videoUrl);
movieList.appendChild(movieDiv);
});
</script>
</!doctype>
0 মন্তব্যসমূহ