Member Avatar for SimonIoa

Hello, i want to cache embedded urls -YouTube, Vimeo- photos and videos so that i could reduce bandwidth usage and server load for my website. How can i help my website to do that? I know that browsers cache information https://en.wikipedia.org/wiki/Web_cache. Is there something i can to do to make it perform better - i mean by cache?

  • 2 Contributors
  • 1 Reply
  • 397 Views
  • 2 Hours Discussion Span
  • Latest Post Latest Post by cereal

Dani AI

Generated

— building on 's observation, the practical win is not trying to mirror hosted streams but to reduce your site's local work: cache small assets and metadata, defer loading the heavyweight player, and serve thumbnails/JSON from your server or a CDN. The pattern below is safe, measurable, and keeps provider bandwidth where it belongs.

Cache workflow (server side)

  • Store oEmbed/metadata responses (JSON) with a TTL (e.g., 24–168 hours) so you don't re-request provider endpoints on every page view.
  • Download and save thumbnails locally (or push them to your CDN). Serve those with long Cache-Control/ETag headers so browsers and CDNs keep them.
  • Use a simple file-cache or Redis for quick lookups (key by provider+id).

Example PHP: basic cached download (thumbnail or oEmbed JSON)

<?php
function cached_fetch($remoteUrl, $localPath, $ttl = 86400) {
    if (file_exists($localPath) && time() - filemtime($localPath) < $ttl) {
        return $localPath;
    }
    $data = @file_get_contents($remoteUrl);
    if ($data === false) return null;
    @mkdir(dirname($localPath), 0755, true);
    file_put_contents($localPath, $data);
    return $localPath;
}
?>

Front-end UX: lazy-load or click-to-play the iframe so the provider player only loads on demand (saves initial requests and JS).

<div class="embed" data-src="https://provider/embed/ID?autoplay=1">
  <img src="/cache/thumbs/ID.jpg" loading="lazy" alt="video thumbnail">
</div>
<script>
document.addEventListener('click', function(e){
  var el = e.target.closest('.embed'); if(!el) return;
  var iframe = document.createElement('iframe');
  iframe.src = el.dataset.src; iframe.allow = "autoplay; encrypted-media";
  el.innerHTML = ''; el.appendChild(iframe);
});
</script>

Notes & cautions

  • Avoid proxying full video streams (huge bandwidth + possible TOS/legal issues). Check provider terms before doing anything that stores or re-serves full media.
  • Choose sensible TTLs and a cache invalidation policy for edited/replaced videos.
  • Use a CDN for cached thumbnails and set Cache-Control (immutable or long max-age with stale-while-revalidate when supported).
  • If thumbnails or oEmbed fail, fall back to a lightweight placeholder so pages remain usable.

These steps reduce your page weight and server CPU/IO while keeping actual streaming handled by the vendor.

Member Avatar for cereal

Embedded contens like YouTube and Vimeo are served by them directly to the client, your page just sends the resource link, then the client opens a connection to the resource. You can see this through the developer console in Chrome: select the Network tab, hit reload for your page and see how the browser start to request data do different domains.

This means that your website bandwidth is not affected by these streams. It would if the video file was hosted and streamed by your server. Or if it was streamed as a proxy system from your web server to the clients connecting to your domain, an example:

It's the same with Google fonts or javascript libraries served by CDN systems.

Edited by cereal
commented: Good explanation of how things work. +12
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.