Facebook Mobile Warning
Due to Facebook changing their API the embed no longer loads on mobile. We can add a warning to let people know if they are viewing on mobile but cannot fix the embed.
Using the HTML at the bottom of this page and the districts facebook embed you can trigger the following warning:
<div class="iframe-fb-container" style="max-width: 340px; margin: auto; position: relative;">
<div id="mobile-error" style="display: none; text-align: center; padding: 20px; color: #000; border: 1px solid #f5c2c7; border-radius: 5px;">
<p><strong>This content is currently unavailable on mobile devices due to restrictions set by Facebook. For the best experience, please view it on a desktop.</strong></p>
</div>
<iframe
id="facebook-iframe"
src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fsunriseparks&show_posts=true&width=340&height=331&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=false&appId=184265735244081"
width="340"
height="331"
style="border:none; overflow:hidden;"
scrolling="no"
frameborder="0"
allowfullscreen="true"
allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share">
</iframe>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
// Detect if the user is on a mobile device
const isMobile = /iPhone|iPad|iPod|Android|webOS|BlackBerry|Windows Phone/i.test(navigator.userAgent);
const iframe = document.getElementById("facebook-iframe");
const errorDiv = document.getElementById("mobile-error");
if (isMobile) {
// Hide iframe and show error message on mobile
iframe.style.display = "none";
errorDiv.style.display = "block";
}
});
</script>