Videos

/* Siraj Live Full-Width Light Theme Layout */
.siraj-video-wrapper {
width: 100%;
max-width: 100%;
margin: 0;
padding: 20px 10px;
font-family: ‘Segoe UI’, Roboto, Helvetica, Arial, sans-serif;
box-sizing: border-box;
background-color: #ffffff; /* Clean White Background without outer box/margin */
}

.top-large-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 25px;
margin-bottom: 30px;
}

.bottom-small-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}

.s-video-card {
text-decoration: none;
background: #ffffff;
border-radius: 10px;
overflow: hidden;
border: 1px solid #eaeaea;
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
}

.s-video-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
border-color: #ffcc00; /* Yellow Border Highlight on Hover */
}

.s-thumb-box {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background-color: #f4f4f4;
}

/* Force YouTube Thumbnails to Render Properly */
.s-thumb-box img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
opacity: 1 !important;
visibility: visible !important;
transition: scale 0.4s ease;
}

.s-video-card:hover .s-thumb-box img {
scale: 1.05;
}

.s-play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 45px;
height: 45px;
background: #ffcc00; /* Vibrant Yellow Play Button */
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 5;
transition: all 0.3s ease;
opacity: 0;
box-shadow: 0 4px 15px rgba(255, 204, 0, 0.4);
}

.s-video-card:hover .s-play-btn {
opacity: 1;
}

.s-play-btn::after {
content: ”;
border-style: solid;
border-width: 7px 0 7px 12px;
border-color: transparent transparent transparent #000000; /* Black Arrow inside Yellow */
margin-left: 2px;
}

.s-video-info {
padding: 12px;
display: flex;
flex-direction: column;
flex-grow: 1;
}

.s-tag {
color: #b38f00; /* Darker Yellow/Gold for readability */
font-size: 10px;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
display: inline-block;
margin-bottom: 3px;
}

.s-date {
color: #777777;
font-size: 11px;
margin-left: 5px;
}

.s-video-title {
color: #1a1a1a !important; /* Deep Dark Text */
font-weight: 600;
margin: 5px 0 0 0;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

.top-large-grid .s-video-title {
font-size: 18px;
}

.bottom-small-grid .s-video-title {
font-size: 14px;
}

.s-load-more {
display: block;
margin: 35px auto 10px;
padding: 12px 30px;
background-color: #1a1a1a; /* Sleek Black Button */
color: #ffffff; /* White Text */
border: none;
border-radius: 50px;
font-size: 13px;
font-weight: 800;
cursor: pointer;
letter-spacing: 1px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.s-load-more:hover {
background-color: #ffcc00; /* Turns Yellow on Hover */
color: #000000;
transform: scale(1.05);
}

/* More Videos Link Container Style */
.siraj-more-container {
text-align: right;
margin: 20px 10px 0 0;
}

.siraj-more-link {
color: #1a1a1a;
font-size: 13px;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
display: inline-block;
transition: color 0.2s ease;
}

.siraj-more-link:hover {
color: #b38f00;
text-decoration: underline;
}

@media (max-width: 768px) {
.top-large-grid, .bottom-small-grid {
grid-template-columns: 1fr;
gap: 15px;
}
}

// 0) {
const seenIds = new Set();
allVideos = [];

for (let item of data.items) {
let videoId = item.snippet.resourceId.videoId;
if (videoId && !seenIds.has(videoId)) {
seenIds.add(videoId);
allVideos.push({
id: videoId,
title: item.snippet.title,
date: new Date(item.snippet.publishedAt).toLocaleDateString()
});
}
}

if (allVideos.length > 0) {
renderInitialGrid();
return;
}
}
fetchFallbackRss();
} catch (err) {
fetchFallbackRss();
}
}

async function fetchFallbackRss() {
const directRss = `https://www.youtube.com/feeds/videos.xml?playlist_id=${PLAYLIST_ID}&nocache=${new Date().getTime()}`;
const proxyUrl = `https://api.allorigins.win/get?url=${encodeURIComponent(directRss)}`;

try {
let res = await fetch(proxyUrl);
let data = await res.json();

if (data.contents) {
let parser = new DOMParser();
let xmlDoc = parser.parseFromString(data.contents, “text/xml”);
let entries = xmlDoc.getElementsByTagName(“entry”);

const seenIds = new Set();
allVideos = [];

for (let i = 0; i 0) {
renderInitialGrid();
} else {
showError();
}
} else {
showError();
}
} catch (e) {
showError();
}
}

function showError() {
document.getElementById(‘top-videos-container’).innerHTML = ‘

No videos found.

‘;
}

function renderInitialGrid() {
const topContainer = document.getElementById(‘top-videos-container’);
const bottomContainer = document.getElementById(‘bottom-videos-container’);

topContainer.innerHTML = “”;
bottomContainer.innerHTML = “”;

// Render Top 2 Large Videos
const top2 = allVideos.slice(0, 2);
top2.forEach(item => {
topContainer.innerHTML += createCardHTML(item);
});

currentIndex = 2;

// Render Bottom Initial Batch
loadMoreVideos();
}

function loadMoreVideos() {
const bottomContainer = document.getElementById(‘bottom-videos-container’);
const nextBatch = allVideos.slice(currentIndex, currentIndex + BATCH_SIZE);

nextBatch.forEach(item => {
bottomContainer.innerHTML += createCard_HTML(item);
});

currentIndex += BATCH_SIZE;

// Show or Hide LOAD MORE Button
const btn = document.getElementById(“load-more-btn”);
if (currentIndex < allVideos.length) {
btn.style.display = "block";
} else {
btn.style.display = "none";
}
}

function createCardHTML(item) {
const videoId = item.id;
const title = item.title;
const date = item.date;
const imgUrl = `https://img.youtube.com/vi/${videoId}/hqdefault.jpg`;

return `

VIDEO
/ ${date}

${title}

`;
}

function createCard_HTML(item) {
return createCardHTML(item);
}

fetchSirajStyleVideos();
//]]>