Efficient Method for Embedding YouTube Videos

Developer
Alen
Size
2,558 Kb
Views
30,360
  1. Efficient Method for Embedding YouTube Videos Previews
  2. Efficient Method for Embedding YouTube Videos HTML Codes
  3. Efficient Method for Embedding YouTube Videos CSS Codes
  4. Efficient Method for Embedding YouTube Videos JS Codes

How do I make an efficient method for embedding youtube videos?

When you embed any YouTube video on your website using standard IFRAME tags, you’ll be surprised to know how much extra weight that YouTube video will add to your page. The web page has to download ~0.5 MB of extra resources (CSS, JavaScript and images) for rendering the YouTube video player and the files will download even if the visitor on your website has chosen not to watch the embedded YouTube video.. What is a efficient method for embedding youtube videos? How do you make a efficient method for embedding youtube videos? This script and codes were developed by Alen on 07 September 2022, Wednesday.

Efficient Method for Embedding YouTube Videos Previews
IQ Test

Efficient Method for Embedding YouTube Videos - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Efficient Method for Embedding YouTube Videos</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="youtube-container"> <div class="youtube-player" data-id="KB4UaexWOaU"></div> </div> <script src="js/index.js"></script>
</body>
</html>

Efficient Method for Embedding YouTube Videos - Script Codes CSS Codes

.youtube-container { display: block; margin: 20px auto; width: 100%; max-width: 600px; }
.youtube-player { display: block; width: 100%; /* assuming that the video has a 16:9 ratio */ padding-bottom: 56.25%; overflow: hidden; position: relative; width: 100%; height: 100%; cursor: hand; cursor: pointer; display: block; }
img.youtube-thumb { bottom: 0; display: block; left: 0; margin: auto; max-width: 100%; width: 100%; position: absolute; right: 0; top: 0; height: auto }
div.play-button { height: 72px; width: 72px; left: 50%; top: 50%; margin-left: -36px; margin-top: -36px; position: absolute; background: url("https://i.imgur.com/TxzC70f.png") no-repeat; }
#youtube-iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

Efficient Method for Embedding YouTube Videos - Script Codes JS Codes

(function() { var v = document.getElementsByClassName("youtube-player"); for (var n = 0; n < v.length; n++) { var p = document.createElement("div"); p.innerHTML = labnolThumb(v[n].dataset.id); p.onclick = labnolIframe; v[n].appendChild(p); }
})();
function labnolThumb(id) { return '<img class="youtube-thumb" src="//i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class="play-button"></div>';
}
function labnolIframe() { var iframe = document.createElement("iframe"); iframe.setAttribute("src", "//www.youtube.com/embed/" + this.parentNode.dataset.id + "?autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=0&showinfo=0"); iframe.setAttribute("frameborder", "0"); iframe.setAttribute("id", "youtube-iframe"); this.parentNode.replaceChild(iframe, this);
}
Efficient Method for Embedding YouTube Videos - Script Codes
Efficient Method for Embedding YouTube Videos - Script Codes
Home Page Home
Developer Alen
Username Alen
Uploaded September 07, 2022
Rating 3
Size 2,558 Kb
Views 30,360
Do you need developer help for Efficient Method for Embedding YouTube Videos?

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!

Alen (Alen) Script Codes
Name
Scrolling with Highlight
Linear Gradient Background Color
CSS Hover Effects
Carousel Slider Using owl.carousel.js
Ribbon CSS Right
A Pen by Alen
Ribbon CSS
Pure HTML 5 Basic
Simple Form in Table Layout
Animation - text
Create amazing love letters 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!