🦉 Add our Live Wildlife Live Stream to Your Website! 🌿
Add the above live wildlife live stream to your website! It is a fantastic way to bring in new traffic and offers something truly wonderful for your visitors to watch. Best of all, you can use ours, meaning there is absolutely nothing for you to maintain, and you can have it up and running in just a few minutes! 🚀
Here is a complete guide to adding the Barn Owl Live stream to WordPress or any standard HTML website.
📹 The Live Stream Embed
Our embed code provides a clean, frameless video that autoplays silently 🤫. It requires no user interaction and works flawlessly across all devices and in privacy-focused browsers (like DuckDuckGo).
Because the sound is muted by default, it is perfect for sidebars or reading pages where you do not want unexpected audio interrupting your visitors. In fact, starting muted is exactly what allows modern mobile browsers to safely autoplay the stream without blocking it! ✅
🎁 Get the code: Grab the HTML code for the widget here: HTML
💻 How to Embed on WordPress
Adding the stream to a WordPress site takes less than a minute using the built-in block editor. ⏱️
-
Copy 📋 the widget HTML code from our site.
-
Open your WordPress dashboard and navigate to the Post or Page where you want the owls to appear.
-
Click the + button to add a new block.
-
Search for and select the Custom HTML block.
-
Paste the widget code directly into the HTML block field.
-
Click Preview on the block to see the cinematic loading screen, then click Update or Publish to save your page. ✨
Using Elementor? Simply drag an HTML Widget into your layout, then paste the code into it.
🛠️ How to Embed on Other Website Builders (Wix, Squarespace, Shopify)
If you are not using WordPress, do not worry! Our widget is built with standard, conflict-free HTML and inline CSS, so it works on virtually any platform. 🌍
-
Copy 📋 the widget HTML code.
-
Open your website editor (e.g., Squarespace, Wix, Weebly, or Shopify).
-
Add a new element to your page and look for the option labelled Embed Code, Custom HTML, or Code Block.
-
Paste the code into the text box provided.
-
Save and publish your page. 🌟 The widget will automatically scale to fit perfectly within whatever column or container you place it in.
🧑💻 How to Add to a Standard HTML Website
If you are hard-coding a website or passing this to your web developer, the widget is completely self-contained. 🧩
Simply paste the code block directly into the <body> of your HTML document wherever you want the video player to render. The widget has a built-in max-width: 800px; and margin: 0 auto; to ensure it stays perfectly centred and proportioned on large desktop screens while shrinking seamlessly for mobile phones. 📱
👋 Share the link with us once you have the stream live on your site! Tag us at @BarnOwllive so we can see how you are sharing the Peak District wildlife with your community. 🦉❤️
The HTML code to embed in your website for this live stream is below –
<!-- START BARN OWL SILENT EMBED WIDGET -->
<style>
.bol-embed-wrap { max-width: 800px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.bol-embed-video-container { position: relative; width: 100%; padding-top: 56.25%; background: #000; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin-bottom: 15px; }
.bol-embed-video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; pointer-events: none; }
/* Loading Overlay */
.bol-embed-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #1e293b; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 10; transition: opacity 0.8s ease; color: #ffffff; pointer-events: none; }
.bol-embed-overlay-text { font-size: clamp(16px, 3.5vw, 26px); margin-top: 15px; transition: opacity 0.5s ease; text-align: center; padding: 0 20px; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; animation: bolEmbedBreathe 4s infinite alternate ease-in-out; }
.bol-embed-live-badge { background: #dc2626; color: #ffffff; padding: 4px 10px; border-radius: 6px; font-weight: 800; text-transform: uppercase; font-size: 0.85em; letter-spacing: 0.05em; }
.bol-embed-pulse { width: 12px; height: 12px; background: #dc2626; border-radius: 50%; animation: bolEmbedPulse 1.2s infinite alternate; }
@keyframes bolEmbedBreathe { 0% { transform: scale(0.98); } 100% { transform: scale(1.02); } }
@keyframes bolEmbedPulse { 0% { transform: scale(0.8); opacity: 0.4; } 100% { transform: scale(1.3); opacity: 1; } }
/* Footer Text */
.bol-embed-footer { text-align: center; font-size: 14px; color: #475569; line-height: 1.5; padding: 0 10px; }
</style>
<div class="bol-embed-wrap">
<div class="bol-embed-video-container">
<iframe id="bol-silent-widget" src="" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<div id="bol-silent-overlay" class="bol-embed-overlay">
<div class="bol-embed-pulse"></div>
<div id="bol-silent-overlay-text" class="bol-embed-overlay-text">
<span>Connecting to Nest Box...</span>
</div>
</div>
</div>
<div class="bol-embed-footer">
Live wild Barn Owl nest box stream from the Peak District, UK.<br>
Brought to you by @BarnOwllive
</div>
</div>
<script>
function runSilentEmbedOverlay() {
let overlay = document.getElementById('bol-silent-overlay');
let textEl = document.getElementById('bol-silent-overlay-text');
if(!overlay || !textEl) return;
overlay.style.display = 'flex'; overlay.style.opacity = 1;
textEl.innerHTML = "<span>Connecting to Nest Box...</span>"; textEl.style.opacity = 1;
setTimeout(() => {
textEl.style.opacity = 0;
setTimeout(() => { textEl.innerHTML = "<span>Powered by @BarnOwlLive</span>"; textEl.style.opacity = 1; }, 500);
}, 2500);
setTimeout(() => {
textEl.style.opacity = 0;
setTimeout(() => { textEl.innerHTML = "<span>Enjoy the</span> <span class='bol-embed-live-badge'>LIVE</span> <span>Feed...</span>"; textEl.style.opacity = 1; }, 500);
}, 5500);
setTimeout(() => {
overlay.style.opacity = 0;
setTimeout(() => { overlay.style.display = 'none'; }, 800);
}, 7500);
}
function loadSilentOwlWidget() {
fetch("https://peaky-weather-default-rtdb.europe-west1.firebasedatabase.app/active_streams.json")
.then(r => r.json())
.then(data => {
if (data && data.BarnOwlCam) {
let iframe = document.getElementById('bol-silent-widget');
let newSrc = `https://www.youtube-nocookie.com/embed/${data.BarnOwlCam.id}?autoplay=1&mute=1&controls=0&disablekb=1&modestbranding=1&rel=0&playsinline=1`;
if (iframe.src !== newSrc) {
iframe.src = newSrc;
runSilentEmbedOverlay();
}
}
}).catch(e => console.log("Stream update failed.", e));
}
loadSilentOwlWidget();
setInterval(loadSilentOwlWidget, 120000);
</script>
<!-- END BARN OWL SILENT EMBED WIDGET -->