Videos in the headers of REW pages

Hello! Wondering if any others have put You Tube videos in the headers of the pages? Any feedback or concern about load times?

1 Like

Hi Ben,

My name is Kyle, I have a couple of sites that have used videos on some internal pages:

http://www.kylelieberman.com/ - Has a video playing on his home page as well as on his about page http://www.kylelieberman.com/about.php.

https://www.marciabergen.com/about.php is another one how has added client testimonial videos to a page.

https://www.radcliffeteam.ca/builders.php - Made a video for some of the select builders they work with.

I can’t speak on load times, things I would advise against are using text overlays in the video as when viewed on mobile the videos are cropped to fit the smaller screen.

What were you wanting to do on your site? Please let me know if you have any other questions

From a performance and user experience perspective, I have these things in mind:

  1. One should think long and hard if it’s worth putting a video on their homepage in the first place. Or any page for that matter. Consider user experience. Consider how much value the video adds compared to a slick looking photo for example which would be lighter in size and may accomplish the same message or effect your trying to convey.

  2. Videos need javascript and css for the players (youtube, vimeo, html5, etc) to play them along with the video itself so they add a bunch of resources. Resources add to the page load time.

  3. Videos require higher than usual CPU and memory usage. They are encoded and compressed and when they play on your computer they will require some form of decoding. The right video codec is key if your not using a 3rd party like vimeo or youtube which already optimize this.

  4. Choose your video wisely, not all videos are equal in performance. Consider a video with millions of colors at high speed like a Formula-1 Racing video or a fireworks show lasting 30 seconds. They both will require large megabytes of data transfer and high cpu & memory usage to decode the fast frame rates and if the user’s mobile or desktop falters just a bit it could cause a very annoying user experience. On the other hand consider a black and white 8 second video seamlesly looping waves crashing on the beach. The later video is going to be super fast.

  5. If your going to place images Below the Fold consider deferring the load (aka lazy load it).

  6. For mobile devices, consider possibly replacing the video with an image and require the user to click a play button or CTA to load the image instead. This gives control to the user to decide if they want your website to drain their monthly data bandwidth.

  7. If you do decide to place videos on any pages try to track their usage so you can optimize. For example Google Analytics provides event tracking so you can to log videos being playing, stopped and fast forwarded. This gives you insight into which videos are working and which are not towards your goals.

2 Likes