Simple async video embed

Developer
Reinier Kaper
Size
2,496 Kb
Views
10,120
  1. Simple async video embed Previews
  2. Simple async video embed HTML Codes
  3. Simple async video embed CSS Codes
  4. Simple async video embed JS Codes

How do I make an simple async video embed?

Easy way to embed videos with JS in an async way, so your page won't slow down and videos will only be loaded on demand.. What is a simple async video embed? How do you make a simple async video embed? This script and codes were developed by Reinier Kaper on 21 January 2023, Saturday.

Simple async video embed Previews
IQ Test

Simple async video embed - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple async video embed</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .video { position: relative; width: 500px; height: 300px; background-color: #00884e;
}
.video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.js-play { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="video" data-embedcode="<iframe width='560' height='315' src='https://www.youtube.com/embed/R6TXuXV1bbY?autoplay=1' frameborder='0' allowfullscreen></iframe>"> <button class="js-play">Play</button>
</div>
<div class="video" data-embedcode="<iframe width='560' height='315' src='https://www.youtube.com/embed/vDbbz-BdyYc?autoplay=1' frameborder='0' allowfullscreen></iframe>"> <button class="js-play">Play</button>
</div> <script src="js/index.js"></script>
</body>
</html>

Simple async video embed - Script Codes CSS Codes

.video { position: relative; width: 500px; height: 300px; background-color: #00884e;
}
.video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.js-play { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);
}

Simple async video embed - Script Codes JS Codes

(function() { var videos = document.querySelectorAll('.video'); for (var i = 0; i < videos.length; i++) { // Closure to call the playVideo function. videos[i].querySelector('.js-play').onclick = (function(index) { return function() { loadVideo(this, videos[index]); }; })(i); } function loadVideo(button, video) { var embedcode = video.dataset.embedcode; var hasvideo = video.dataset.hasvideo; // Only append the video if it isn't yet appended. if (!hasvideo) { video.insertAdjacentHTML('afterbegin', embedcode); video.dataset.hasvideo = "true"; button.remove(); } }
})();
Simple async video embed - Script Codes
Simple async video embed - Script Codes
Home Page Home
Developer Reinier Kaper
Username TheDutchCoder
Uploaded January 21, 2023
Rating 4
Size 2,496 Kb
Views 10,120
Do you need developer help for Simple async video embed?

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!

Reinier Kaper (TheDutchCoder) Script Codes
Name
A Pen by Reinier Kaper
CSS dynamic slider
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!