Youtube Lightbox

Developer
Tyler Fowle
Size
3,002 Kb
Views
24,288
  1. Youtube Lightbox Previews
  2. Youtube Lightbox HTML Codes
  3. Youtube Lightbox CSS Codes
  4. Youtube Lightbox JS Codes

How do I make an youtube lightbox?

What is a youtube lightbox? How do you make a youtube lightbox? This script and codes were developed by Tyler Fowle on 12 August 2022, Friday.

Youtube Lightbox Previews
IQ Test

Youtube Lightbox - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Youtube Lightbox</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="content"> <h1>Welcome</h2> <h4>Youtube Lightbox</h4> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. </p> <!-- start important stuff--> <!-- start important stuff--> <center> <label class="openbox" data-video="1">Play Video 1</label> <label class="openbox" data-video="2">Play Video 2</label> <label class="openbox" data-video="3">Play Video 3</label> </center>
<div class="videowrap"> <label class="closebox">×</label> <iframe id="video" frameborder="0" allowfullscreen></iframe>
</div> <!-- end important stuff --> <!-- end important stuff --> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. </p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. </p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. </p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Youtube Lightbox - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
body{ font-family: 'Open Sans'; font-size: 1.2em; padding: 20px; background: #778899;
}
.content { width: 80%; margin: 0 auto; padding: 20px; background: #556677;
}
.openbox, .closebox{ background: #006699; color: white; padding: 10px 14px; font-family: Arial, Baskerville, monospace; border-radius: 50px; cursor: pointer;
}
.closebox{ position: absolute; margin: 20px; top: 0; right:0; -webkit-user-select: none; -moz-user-select: none; user-select: none; font-family: Arial, Baskerville, monospace; font-size: 40px; box-sizing: border-box; padding: 0; padding-right: 1px; height: 40px; width: 40px; display: block; text-align: center; line-height: 44px;
}
.videowrap { display: none; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,.9);
}
#video{ width: 600px; height: 400px; position: absolute; left: 50%; margin-left: -300px; top: 50%; margin-top: -200px;
}

Youtube Lightbox - Script Codes JS Codes

var player;
var vidNum;
var appendJ = "?enablejsapi=1"
var video1 = "//www.youtube.com/embed/f7ld-3nZUxA?rel=0" + appendJ;
var video2 = "//www.youtube.com/embed/afUUBvWBp3I" + appendJ;
var video3 = "//www.youtube.com/embed/HkMNOlYcpHg" + appendJ;
$(function(){ $(".openbox").click(function(){ $("html, body").animate({ scrollTop: 0 }, "slow"); var vidNum = $(this).attr("data-video"); //scroll to top $("#video").parent().fadeIn(400); //which video is going to play switch (vidNum){ case "1": $("#video").attr("src",video1); break; case "2": $("#video").attr("src",video2); break; case "3": $("#video").attr("src",video3); break; } //make video auto play $("#video")[0].src += "&autoplay=1"; }); //click X $(".closebox, .videowrap").click(function(){ $(".videowrap").fadeOut(400); $("#video").attr("src",""); }); //esc keydown $(document).keydown(function(event){ if(event.which == 27){ $(".videowrap").fadeOut(400); $("#video").attr("src",""); } });
});
Youtube Lightbox - Script Codes
Youtube Lightbox - Script Codes
Home Page Home
Developer Tyler Fowle
Username tylerfowle
Uploaded August 12, 2022
Rating 3
Size 3,002 Kb
Views 24,288
Do you need developer help for Youtube Lightbox?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tyler Fowle (tylerfowle) Script Codes
Name
3d Sticky Nav
Fixed Navigation
Watch_Dogs
Peeking Panels
Design Idea
Pure CSS Slider
No-Scroll Google Map
Flexbox Footer
Sticky Sections
Timeline Slider Navigation
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!