ฅ՞>ﻌ<՞ฅ Woof! 🤍❤️🧡💛💚💙💜🖤
☝️ The above video is embedded from url:
I am tired of individually managing all my YouTube embeds in this Google Site. Every time I decided to make a little change or update to the design of my embeds, in order to get them all having the same uniformly tweak, whether it is the underlying code or shape, I have to manually update all of them. That's a hell lot of pain. Now I host my custom-made, reusable, modular version at: https://yt-embed.woofiepie.me?v=<videoId>. If I do need to update them, I will edit once and redeploy, then all my embeds using this method would magically inherit the new version.
Simply replace the <videoId> to your desired YouTube video Id to embed. Voila!
<style>
#videoContainer {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.yt-thumbnail {
cursor: pointer;
border-radius: 5%;
width: 100%;
height: 100%;
}
</style>
<div id="videoContainer"></div>
<script>
const params = new URLSearchParams(window.location.search);
const videoId = params.get("v");
const container = document.getElementById("videoContainer");
const thumbnail = document.createElement("img");
thumbnail.src = `https://img.youtube.com/vi/${videoId}/mqdefault.jpg`;
thumbnail.setAttribute("loading", "lazy");
thumbnail.className = "yt-thumbnail";
thumbnail.onclick = function () {
container.innerHTML = `
<iframe
src="https://www.youtube-nocookie.com/embed/${videoId}?autoplay=1"
frameborder="0"
allow="autoplay; encrypted-media"
allowfullscreen
style="position:absolute;top:0;left:0;border-radius:5%;width:100%;height:100%;"
></iframe>`;
};
container.appendChild(thumbnail);
</script>