Are you looking to embed a Youtube Video Webpage Background? It is now much easier.<\/p>\n
Remember the hassles over the past few years regarding embedding video?<\/p>\n
Well, times have changed:\u00a0HTML5 has made\u00a0embedding video inside a web page really easy now.<\/p>\n
You just need to prepare a good-quality video in MP4\/H.264 format, host it on your web server and insert the <video> tag with the MP4 URL on your designed page. You might need more files in a different format to support all browsers.<\/p>\n
If you want to have an immediate impact on your customers, than a background video is the way to go.<\/p>\n
XPON has recently completed some great web designs using HTML5 video background. The only downside to this web technique is that the video has to be hosted on the webserver, meaning that a huge bandwidth quota might be used if the MP4 file size is large.<\/p>\n
Internetrix redesigned the\u00a0KidzWish Foundation website.<\/a>\u00a0A video background section was created on the new Homepage with the MP4 file hosted on the same server. We found that the website was consuming hundreds of Gigabytes in bandwidth quota every month.<\/p>\n This is abnormal because the KidzWish website neither has many images nor file resources to download. We investigated the log files and found 99.7% of the bandwidth was generated from the Homepage MP4 file!<\/p>\n We configured cache control on our servers for the .mp4 file, meaning that browsers should then cache the video file. However, after testing different browsers, it turned out that Chrome could not correctly cache a file larger than 10 Megabytes. The Homepage video is 22MB and automatically replays, meaning that Chrome keeps downloading the .mp4 file from the server and generating bandwidth!<\/p>\n Fixing the cache problem in Chrome isn\u2019t easy. The solution we found<\/a> was to host the video on a 3rd party video hosting provider like Youtube and embed it in the background as HTML5 Video.<\/p>\nFixing the cache issue<\/strong><\/h4>\n
STEP 1<\/h4>\n