Adding Background Video on Cover Block Problem – No Bandwidth Issues

  • KennyLL

    (@kennyll)


    2 years, 5 months ago

    Hi, I’m trying to find out what is the ‘proper’ way to add video as a background element of a default WP Cover Block so that it doesn’t chew up MASSIVE bandwidth just sitting there?

    We have a test site with a short video set as the background media of a Cover block, which then has an overlay color and text over it. The video is 12 seconds long, and auto-loops. It is an .mp4 file that is 8MB, rendered at 720p, 5Mbps. So it should be ‘decently’ small & optimized for a video that spans the width of site.

    But with the site not indexed, and ONLY me accessing, viewing, or working on it, we’re seeing MASSIVE bandwidth usage (upwards of 1GB+ per day sometimes). So something is not setup or optimized correctly, as background video is not that uncommon.

    – Is there anything with the way we’ve set this video as a background on a Cover block that could be causing this?

    – We don’t have caching enabled yet. Is it as simple as enabling caching (we typically use W3 Total Cache)?

    – Are there any tools that we can measure bandwidth a bit more in real-time, so we can see quickly if making changes has an actual affect? The bandwidth apps in cPanel for the account are more for checking a previous days/weeks/months bandwidth usage after-the-fact.

    – It’s not possible to use a hosted video (e.g, YouTube or Vimeo) as the background media element, is it? We didn’t see that option. That would obviously be ideal.

    THANKS FOR ANY TIPS OR DIRECTION HERE!

    • This topic was modified 2 years, 5 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic
Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    2 years, 5 months ago

    Caching alone will not help much with bandwidth usage. Content still has to be delivered to visitors. An 8 MB file delivered to 125 visitors will entirely use up your 1 GB allowance if they all come on the same day. Other measures that minify and compress data (which some caching plugins offer) will help some. Ensuring file headers encourage client side caching will help with return visitors. If not already in place, a few .htaccess directives will make it so.

    You can embed hosted videos as backgrounds, but not by using the cover block. AFAIK you’d have to manually create video background and cover content via custom HTML. If a video background is that important and you must stay with limited bandwidth, it’s probably worth the additional effort required. You can find example HTML code on the ‘net. Paste it into a custom HTML block and edit as needed.

    I suspect that with your web hosting plan, there will be no way to monitor traffic in real time. It would require installing a server app, which is likely not possible with your plan. I would think recent history data would be just as useful as real time data, use the tools that are already available to you. It’s really just about minimizing how much data has to be served for any given request. When the data is served within a day isn’t all that useful.

    Thread Starter KennyLL

    (@kennyll)

    2 years, 5 months ago

    Thanks for the thorough response, much appreciated!

    I think the main issue I was hoping to determine and debug is whether the auto-looping aspect of the video was somehow chewing up increasing amounts of bandwidth if I just had that browser tab in foreground/focus. There were days where there was over 2GB bandwidth with ONLY me viewing/using site, and that ‘might’ have been just leaving the tab in focus when done for the day (I think my computer won’t go to sleep if that video is showing).

    I’ll look up samples of loading video from 3rd-party service rather than self-hosting. Was just trying to keep it simple so easy to edit for others, and to see how the ‘built-in’ functionality actually worked, since it is an available option in WordPress. Would it be safe to assume others doing this with WP use a 3rd-party service or just ‘deal with’ the bandwidth issues?!?

    And we do have a dedicated server, but like to keep additional non-default apps to a minimum. If there was something that would not have a lot of dependencies, and provide a simple enough view of bandwidth for ONE PARTICULAR site/user, we might be open to checking it out. Our server is running CloudLinux/cPanel.

    – Any other tips?

    Thanks!

    Moderator bcworkz

    (@bcworkz)

    2 years, 5 months ago

    Once the browser obtains the video file used as a cover background, that’s the end of related bandwidth usage. The file is kept in memory to keep the loop running. Behavior may be different with streamed, hosted videos, but for video files served from your server the initial file size is the only related traffic. You can verify for yourself by using your browser’s network developer tool. It’s kind of like the server app you seek, but applied on the receiving end.

    I’m not up to speed on server apps, so I cannot suggest anything. Though your site has no users and is not indexed, if it’s accessible on the ‘net you probably are still getting bot traffic. Check your access logs.

    The information you seek is contained in the access logs, but it’s not in a form that is easily digestible. You might be able to import the log into a spreadsheet so that the timestamps and transfer size are each in their own columns. Then a data vs. time graph could be generated from the data. Any other analysis you might desire ought to also be feasible through the usual spreadsheet data analysis techniques. Not nearly as sophisticated as a server app, but you likely already have the necessary tools at hand.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Adding Background Video on Cover Block Problem – No Bandwidth Issues’ is closed to new replies.