Video Embeds with Optional Thumbnail and Lightbox – Inline HTML
Free design resources brought to you by Sara Lynn Designs
In this article, you will get HTML inline code to directly insert into your Word Press website. You can add the javascript in right along with the html code or add it in spearately.
Youtube Embed v1
Features:
- Embed a YouTube video
- Make it autoplay on mute
- Contains a button overlay
- Button opens a lightbox to play video in center of the screen.
The Result
The Code
HTML
<!-- Auto-playing Background Video -->
<div style="position: relative; width: 100%; padding-bottom: 52.77%; height: 0; overflow: hidden;">
<iframe
src="https://www.youtube.com/embed/tHCXF4-tvrw?autoplay=1&mute=1&modestbranding=1&rel=0&showinfo=0&controls=0&iv_load_policy=3&playsinline=1&disablekb=1"
title="Background Video"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;">
</iframe>
<!-- Play Button -->
<div
style="
position: absolute;
bottom: 20%;
left: 50%;
transform: translateX(-50%);
background-color: #0037ff;
color: #ffffff;
padding: 1.5rem 2.4rem;
border-radius: 0px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
cursor: pointer;"
onclick="openLightbox()">
<span style="text-transform:uppercase; letter-spacing:1.2px;">Watch Full Video</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" width="24" height="24" style="margin-left: 8px;">
<path d="M6.5 3.5v9l7-4.5-7-4.5z"></path>
</svg>
</div>
</div>
<!-- Lightbox Modal -->
<div id="videoLightbox" style="
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 999;
justify-content: center;
align-items: center;">
<!-- Close Button -->
<button onclick="closeLightbox()" style="
position: absolute;
top: 80px;
right: 40px;
background: none;
border: none;
color: white;
font-size: 35px;
cursor: pointer;">
×
</button>
<!-- Video -->
<iframe
id="videoPlayer"
src=""
title="Full Video Player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
style="width: 80%; height: calc(42.25vw); border: none;">
</iframe>
</div>
The Javascript for Lightbox
SCRIPT
<script>
function openLightbox() {
const lightbox = document.getElementById('videoLightbox');
const videoPlayer = document.getElementById('videoPlayer');
// Set the video source with sound enabled
videoPlayer.src = "https://www.youtube.com/embed/tHCXF4-tvrw?autoplay=1&modestbranding=1&rel=0&showinfo=0";
// Show the lightbox
lightbox.style.display = "flex";
// Close the lightbox if clicking outside the video
lightbox.addEventListener('click', (e) => {
if (e.target === lightbox) {
closeLightbox();
}
});
}
function closeLightbox() {
const lightbox = document.getElementById('videoLightbox');
const videoPlayer = document.getElementById('videoPlayer');
// Stop the video playback
videoPlayer.src = "";
// Hide the lightbox
lightbox.style.display = "none";
}
</script>
Youtube Embed v2
Features:
- Embed a YouTube video
- Contains a button overlay
- Button opens a lightbox to play video in center of the screen.
- Includes a thumbnail overlay
The Result
The Code
HTML
<div style="position: relative; width: 100%; padding-bottom: 53.0%; height: 0; overflow: hidden;">
<!-- Custom Thumbnail -->
<img
src="https://saralynndesigns.com/wp-content/uploads/2024/12/RORS-logo-SM.jpg"
alt="Custom Thumbnail"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; cursor: pointer;"
onclick="playVideo(this)" />
<!-- YouTube Video -->
<iframe
src="https://www.youtube.com/embed/tHCXF4-tvrw"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; display: none;">
</iframe>
<!-- Play Button -->
<div
style="
position: absolute;
bottom: 10%;
left: 50%;
transform: translateX(-50%);
background-color: #0037ff;
color: #ffffff;
font-size: 15px;
padding: 1.5rem 2.4rem;
border-radius: 0px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
cursor: pointer;"
onclick="openLightbox()">
<span style="font-weight: bold; text-transform:uppercase;">Watch Full Video</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" width="24" height="24" style="margin-left: 8px;">
<path d="M6.5 3.5v9l7-4.5-7-4.5z"></path>
</svg>
</div>
</div>
<!-- Lightbox Modal -->
<div id="videoLightbox" style="
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 999;
justify-content: center;
align-items: center;">
<!-- Close Button -->
<button onclick="closeLightbox()" style="
position: absolute;
top: 80px;
right: 40px;
background: none;
border: none;
color: white;
font-size: 35px;
cursor: pointer;">
×
</button>
<!-- Video -->
<iframe
id="videoPlayer"
src=""
title="Full Video Player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
style="width: 80%; height: calc(42.25vw); border: none;">
</iframe>
</div>
The Javascript for Lightbox
SCRIPT
<script>
function openLightbox() {
const lightbox = document.getElementById('videoLightbox');
const videoPlayer = document.getElementById('videoPlayer');
// Set the video source with sound enabled
videoPlayer.src = "https://www.youtube.com/embed/tHCXF4-tvrw?autoplay=1&modestbranding=1&rel=0&showinfo=0";
// Show the lightbox
lightbox.style.display = "flex";
// Close the lightbox if clicking outside the video
lightbox.addEventListener('click', (e) => {
if (e.target === lightbox) {
closeLightbox();
}
});
}
function closeLightbox() {
const lightbox = document.getElementById('videoLightbox');
const videoPlayer = document.getElementById('videoPlayer');
// Stop the video playback
videoPlayer.src = "";
// Hide the lightbox
lightbox.style.display = "none";
}
</script>
Hope this helps! Bookmark this page and come back.
Want more resources? Check out my full blog below.
