{"id":20116,"date":"2019-01-30T12:30:06","date_gmt":"2019-01-30T12:30:06","guid":{"rendered":"https:\/\/www.heartinternet.uk\/blog\/?p=20116"},"modified":"2019-01-30T12:30:06","modified_gmt":"2019-01-30T12:30:06","slug":"best-practices-for-incorporating-video-in-your-website","status":"publish","type":"post","link":"https:\/\/www.heartinternet.uk\/blog\/best-practices-for-incorporating-video-in-your-website\/","title":{"rendered":"Video killed my data plan: Best practices for incorporating video"},"content":{"rendered":"

As networks speed up and devices become ever more powerful, designers and developers can add new immersive features to websites and applications that were previously \u2018too slow.\u2019 One popular feature that most devices and networks can handle is video. Research shows that the addition of video increases customer engagement and retention due to the more immersive experience.\n<\/p>\n

\nHowever, delivering video has downsides as well. Video files are by far the largest files delivered on the web. Websites with video utilise 300 to 600 percent more Kilobytes than sites without video:\n<\/p>\n

\n\"A
Data from 15\/12\/2018 HTTP Archive (httparchive.org)<\/small><\/p>\n

\nCustomers on limited data plans, or those who are roaming, may face unexpected costs from visiting your website incorporating video. Improperly formatted videos can slow down the delivery of the website (and slow websites lose engagement with consumers). Also, if the video cannot be downloaded on the available network, it can lead to a slow startup, stalls and further push away your customers. So, what can we do to make sure that the video delivered on the web is fast, responsive, and does not destroy the mobile data plans of your users?\n<\/p>\n

\nRead on to find out!\n<\/p>\n

\nNote: In this article, I\u2019ll only be addressing discrete video files, and not video streaming. Look for additional posts on how to optimise video streams on the web.<\/p>\n

The animated GIF: the first video of the internet<\/h3>\n

\nAnimated GIFs can be found in most social media conversations \u2014 on Twitter, Facebook, Slack, etc \u2014 and are ubiquitous across the web. However, let\u2019s step back to 1990 \u2014 before the World Wide Web existed \u2014 and look into the GIF specification<\/a>. It turns out (if you get to Appendix D) that…\n<\/p>\n

\n

\n\u201cThe Graphics Interchange Format is not intended as a platform for animation, even though it can be done in a limited way.\u201d\n<\/p>\n<\/blockquote>\n

\nI suppose this is not the first time (nor the last) that a technology was used counter its initial purposes. But why would the GIF developers say such a thing? Well, it turns out that animated GIF files are really<\/em> large and not the optimal way to serve video on the web. Animated GIFs are really a flipbook of discrete GIF images, being played back at a fast framerate. Video, on the other hand, will compress the file through the dimension of time, which creates much smaller files. Lighthouse<\/a> performance audits will fail your test if they find an animated GIF on your site and recommends that all animated GIFs are replaced with video files<\/a>.\n<\/p>\n

\n\"An<\/p>\n

But\u2026 <insert social platform> uses animated GIFs. Why can\u2019t I?<\/h3>\n

Of course social media platforms say that they support GIFs. And the screen even shows that the file is a GIF in the bottom left corner:<\/p>\n

\n\"An\n<\/p>\n

\nBut\u2026 if you open the page in Chrome DevTools, there is no GIF file. Twitter is actually serving the animation as a movie \u2014 at just 119 KB!\n<\/p>\n

\n\"A\n<\/p>\n

\nHow big is the original GIF? We can go to Giphy<\/a> and try to find out. But, low and behold, in Chrome, Giphy takes the GIF URL, but delivers an animated WebP image (857 KB) \u2014 since WebP files compress more efficiently than animated GIFs. Opening the Giphy link in Safari (which doesn\u2019t support WebP) delivers a 2.4 MB GIF. So the MP4 is just five percent the size of the animated GIF \u2014 it\u2019s no wonder that most platforms are moving away from the GIF and embracing the looping video!\n<\/p>\n

\nHow do you deliver a GIF as a video? In all likelihood, you probably already have the MP4, but you can use FFmpeg<\/a> to convert the animated GIF to an MP4 file. Or you can use a tool like Giphy to create the MP4 file for you, and then you can just place it in a HTML5 video tag:<\/p>\n

<video src=\"shaq.mp4\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" width=\"300\" height=\"150\"><\/code><\/pre>\n
Now you are using animated GIFs like the pros!<\/p>\n
Autoplay videos<\/h3>\n
By autoplaying videos, you add new levels of motion and interaction to your site that were previously unavailable to users of the web. Sometimes these appear as a \u201chero video\u201d \u2014 a banner video that plays at the top of the page. Other times, they appear as small video windows embedded into the page. Let\u2019s look at an example of a hero video:\n<\/p>\n
\n\"An\n<\/p>\n
\nThe University of Illinois MBA program<\/a> has a hero video that shows off the UI campus to prospective students. It\u2019s a really cool video \u2014 if you ever manage to see it, that is. On relatively fast home Wi-Fi, I see this for about 40 seconds:\n<\/p>\n
\n\"A\n<\/p>\n
Unless I am very patient, I\u2019ll never actually see the video play in my browser! Let\u2019s look at the HTML here, and parse what we see:<\/p>\n
<div class=\"fullwidth-video\">\n<video preload=\"auto\" autoplay loop muted>\n<source src=\"https:\/\/business.illinois.edu\/mrefresh\/wp-content\/uploads\/sites\/78\/2016\/08\/Campus.mp4\" type=\"video\/mp4\">\n&lt:\/video>\n<\/div>\n<div class=\"fullwidth-video-image\" style=\"background-image:url(https:\/\/mba.illinois.edu\/wp-content\/uploads\/sites\/78\/2017\/12\/MBA-Network-e1513363230473-400x274.jpg);\"><\/div><\/code><\/pre>\n
There are two div tags \u2014 one for the video, and one for a background image. Inside the video tag, we have autoplay, loop and muted parameters. Autoplay and loop make sense, but the muted is required in mobile browsers for video to autoplay (we\u2019ll touch more on mobile later). \u00a0One term not seen in the code is the poster attribute, which will display an image instead of the black screen to improve the appearance of the page while the image loads:<\/p>\n
<video src=\"mybigvideo.mp4\" poster=\"poster.jpg\"><\/code><\/pre>\n<\/p>\n
The fullwidth-video-image div is only called with a mobile user agent, so desktop users never see the background image.<\/p>\n
Best practice:<\/strong><\/p>\n
Add a poster image to fill the place of the video while it loads.<\/p>\n
But why does this video take so long to download? A quick look at the response headers in Chrome DevTools gives us some insight:<\/p>\n
\n\"A\n<\/p>\n
\nThe cache control headers indicate that the movie will be stored for one year (3.15 million seconds). The content length header shows that this video is 98.6 MB, which explains why it takes so long to download and playback in the browser!\n<\/p>\n
Why is the video so large?<\/h3>\n
\nLet\u2019s examine this video to understand why it\u2019s so large. We\u2019ll use ffprobe<\/code> (part of the FFmpeg<\/a> toolset) to examine it:\n<\/p>\n
\nffprobe -v error -show_streams -show_format http:\/\/mba\u2026.campus.mp4<\/code>\n<\/p>\n
\nA long output appears in the terminal. Let\u2019s focus on just a few parameters.\n<\/p>\n
\nFrom the FORMAT output:<\/p>\n\n\n\n\n\n
nb_streams=2<\/td>\nThere are two streams of data. We should make sure both are required.<\/td>\n<\/tr>\n
duration=50.92266<\/td>\nIt\u2019s probably longer than needed, but perhaps that is outside the developer\u2019s control.<\/td>\n<\/tr>\n
size=98611339<\/td>\nIt\u2019s 98.6 MB. Now we see why this is taking so long\u2026 We can work some magic here.<\/td>\n<\/tr>\n
bit_rate=15491936<\/td>\nA 15.5 Megabits-per-second video is pretty high quality for the web. Reducing this will certainly reduce the file size.<\/td>\n<\/tr>\n<\/table>\n
 <\/p>\n
\nNow let\u2019s look at the STREAM outputs.<\/p>\n
Stream 0:<\/p>\n\n\n\n\n
codec_long_name=H.264
\/ AVC
\/ MPEG-4 AVC
 \/ MPEG-4 part 10<\/td>\n		Pretty standard encoding.<\/td>\n<\/tr>\n
width=1920 height=1080<\/td>\nA 1080p video. Pretty large dimensions \u2014 perhaps we can encode to smaller dimensions.<\/td>\n<\/tr>\n
r_frame_rate=30000\/1001<\/td>\n30 frames per second.<\/td>\n<\/tr>\n<\/table>\n
 <\/p>\n
Stream 1:<\/p>\n\n\n\n
codec_name=aac
  codec_long_name=AAC
  (Advanced Audio Coding)
  profile=LC
  codec_type=audio<\/td>\n		An audio stream. For a silent video!<\/td>\n<\/tr>\n
sample_rate=48000<\/td>\n48k audio.<\/td>\n<\/tr>\n<\/table>\n
 <\/p>\n
\nThe second stream is an audio track. For a video that plays in the background and is silent. To be fair, the audio track has no sound but it does have a size volume that is downloaded on each playback. We\u2019ll remove this track in the next section.<\/p>\n
How do we make the hero video smaller?<\/h3>\n
\nWe will use FFmpeg<\/code> for the optimisations.\n<\/p>\n
\n1.\tReduce file quality. We\u2019ll first work to lower the quality by adding a constant rate factor (FFmpeg recommends 17 to 28 for the web, and higher numbers are lower quality).\n<\/p>\n
\nffmpeg -i Campus.mp4 -c:v libx264 -preset slow -crf 22 -c:a copy campus2.mp4<\/code>\n<\/p>\n
\nThis gets the file to nearly 35 MB.\n<\/p>\n
\n2.\tReduce the dimensions from 1080p to 720p by adding a scale factor \u2014 \u201c-vf scale=-1:720\u201d<\/code> \u2014 reducing the video size to 17 MB.\n<\/p>\n
\n3.\tFinally, we\u2019ll remove the silent audio stream using -map 0:0 -vcodec copy<\/code>, which saves an additional 2 MB and results in a 15.7 MB video.\n<\/p>\n
\n4.\tRaising the crf to 28 lowers the video size to 6.7 MB, with no substantial loss in video quality (see for yourself!<\/a>)\n<\/p>\n
Best practices:<\/strong><\/p>\n
Resize video dimensions appropriately.<\/p>\n
Test different video encoding qualities. Generally 20 to 28 are safe for the web.<\/p>\n
For silent videos remove the audio track, even if there is no audio present to reduce the file size.<\/p>\n
Video on mobile<\/h3>\n
Now, you might imagine, as the title of this post implies, that a 98 MB video would indeed kill many people\u2019s data plans. I recently had the opportunity to visit Russia, and my roaming plan was \u20ac10\/MB. Visiting this page once would have cost me nearly \u20ac1000 for the video alone!\n<\/p>\n
\nOne common data-saving tactic is to replace the video with an image on mobile. In the HTML code above, we see a div with a background image, which is only displayed on mobile. Problem solved, right? It all looks great, until you run the same test on a mobile device with DevTools open. And then the preload=”auto” attribute in the video tag rears its ugly head. When the browser sees that tag, it will download the content \u2014 even if it\u2019s never displayed on the page. In this case, Chrome eventually gives up on the download, but in one WebPageTest run, there were 44.5 MB of video downloaded, which was never viewed by the end user!\n<\/p>\n
\n\"A\n<\/p>\n
Best practices:<\/strong><\/p>\n
If the video is not going to be displayed, don\u2019t download it for your customers.<\/p>\n
Preload=\"auto\"<\/code> is great if there is a very high possibility that the video will be viewed. Otherwise you are just wasting bytes.<\/p>\n
Background videos and video length<\/h3>\n
One popular way to utilise autoplaying video on the web is to add a background video that plays behind your content. Assuming that it contrasts well with the foreground text, this can be a great way to add motion and cool effects to your website. For example, this website (with name obfuscated) uses a video of a walking tiger at the top of the page:\n<\/p>\n
\n\"an\n<\/p>\n
\nNow, if a background video is too large, it may never actually display in the background while the page is open, because it\u2019s still downloading. When delivering a video, the main way to reduce the video size is to change the dimensions: width\/height, bitrate and length.\n<\/p>\n
\nFor background videos, when there is a filter obscuring the video slightly, you can serve a lower resolution or lower bitrate video without your customers actually noticing. But the easiest way to ensure a smaller file is to reduce the length of the video. In the case of the pacing tiger above, the video is 55 seconds long. Perhaps just 10 seconds of looping would be sufficient.\n<\/p>\n
\nAlso, the video is delivered as a Quicktime file (.mov). These files tend to be larger in size. Using FFmpeg<\/code> to convert this file to an MP4 is easy:\n<\/p>\n
\nffmpeg -i Tiger-background.mov tiger.mp4<\/code>\n<\/p>\n
\nThis creates an MP4 file that is 10 MB (76%) smaller. Now, let\u2019s shorten the file to 10 seconds:\n<\/p>\n
\nffmpeg -i Tiger-background.mov -t 10 tiger.mp4<\/code>\n<\/p>\n
\nThis gets us to 3.2 MB (92% smaller).\n<\/p>\n
\nBy working to reduce the size of the video, your customers are more likely to have the entire file downloaded and see he background video effect play in their browser.\n<\/p>\n
Conclusion<\/h3>\n
\nVideo can be delivered to the browser in a way that is fast and responsive, if just a little thought is given to the attributes of the video being displayed. Reducing the size of the video file ensures that it can be delivered quickly to customers on all types of connections, giving them the interactive immersive experience you are looking for. So, before you just simply add a video to your page, use the techniques mentioned above to see if you can reduce the size without harming the quality. This will give your customers the best possible immersive experience \u2014 which is our end goal anyway.<\/p>\n","protected":false},"excerpt":{"rendered":"
Video is a great way to communicate on the web, but video can be very resource hungry. Learn how to optimise video on the web so your sites don’t become bloated.<\/p>\n","protected":false},"author":2,"featured_media":20176,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,24],"tags":[],"class_list":{"0":"post-20116","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-guest-posts","8":"category-web-design"},"yoast_head":"\nVideo killed my data plan: Best practices for incorporating video - Heart Internet<\/title>\n<meta name=\"description\" content=\"Learn the best practices for incorpating video on your websites so you don't end up creating sites that are bloated with huge video files\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.heartinternet.uk\/blog\/best-practices-for-incorporating-video-in-your-website\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Video killed my data plan: Best practices for incorporating video - Heart Internet\" \/>\n<meta property=\"og:description\" content=\"Learn the best practices for incorpating video on your websites so you don't end up creating sites that are bloated with huge video files\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.heartinternet.uk\/blog\/best-practices-for-incorporating-video-in-your-website\/\" \/>\n<meta property=\"og:site_name\" content=\"Heart Internet\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/heartinternet\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-01-30T12:30:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/01\/video-camera-filming.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"733\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Eliot Chambers-Ostler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@heartinternet\" \/>\n<meta name=\"twitter:site\" content=\"@heartinternet\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Eliot Chambers-Ostler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/best-practices-for-incorporating-video-in-your-website\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/best-practices-for-incorporating-video-in-your-website\/\"},\"author\":{\"name\":\"Eliot Chambers-Ostler\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28\"},\"headline\":\"Video killed my data plan: Best practices for incorporating video\",\"datePublished\":\"2019-01-30T12:30:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/best-practices-for-incorporating-video-in-your-website\/\"},\"wordCount\":1928,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/best-practices-for-incorporating-video-in-your-website\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/01\/video-camera-filming.jpg\",\"articleSection\":[\"Guest Posts\",\"Web Design\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.heartinternet.uk\/blog\/best-practices-for-incorporating-video-in-your-website\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/best-practices-for-incorporating-video-in-your-website\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/best-practices-for-incorporating-video-in-your-website\/\",\"name\":\"Video killed my data plan: Best practices for incorporating video - Heart Internet\",\"isPartOf\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/best-practices-for-incorporating-video-in-your-website\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/best-practices-for-incorporating-video-in-your-website\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/01\/video-camera-filming.jpg\",\"datePublished\":\"2019-01-30T12:30:06+00:00\",\"description\":\"Learn the best practices for incorpating video on your websites so you don't end up creating sites that are bloated with huge video files\",\"breadcrumb\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/best-practices-for-incorporating-video-in-your-website\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.heartinternet.uk\/blog\/best-practices-for-incorporating-video-in-your-website\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/best-practices-for-incorporating-video-in-your-website\/#primaryimage\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/01\/video-camera-filming.jpg\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/01\/video-camera-filming.jpg\",\"width\":1100,\"height\":733},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/best-practices-for-incorporating-video-in-your-website\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.heartinternet.uk\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Video killed my data plan: Best practices for incorporating video\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/heartblog.victory.digital\/#website\",\"url\":\"https:\/\/heartblog.victory.digital\/\",\"name\":\"Heart Internet\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/heartblog.victory.digital\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\",\"name\":\"Heart Internet\",\"url\":\"https:\/\/heartblog.victory.digital\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp\",\"width\":992,\"height\":252,\"caption\":\"Heart Internet\"},\"image\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/heartinternet\/\",\"https:\/\/x.com\/heartinternet\",\"https:\/\/www.linkedin.com\/company\/heart-internet-ltd\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28\",\"name\":\"Eliot Chambers-Ostler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg\",\"caption\":\"Eliot Chambers-Ostler\"},\"url\":\"https:\/\/www.heartinternet.uk\/blog\/author\/eliot-chambers-ostler\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Video killed my data plan: Best practices for incorporating video - Heart Internet","description":"Learn the best practices for incorpating video on your websites so you don't end up creating sites that are bloated with huge video files","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.heartinternet.uk\/blog\/best-practices-for-incorporating-video-in-your-website\/","og_locale":"en_GB","og_type":"article","og_title":"Video killed my data plan: Best practices for incorporating video - Heart Internet","og_description":"Learn the best practices for incorpating video on your websites so you don't end up creating sites that are bloated with huge video files","og_url":"https:\/\/www.heartinternet.uk\/blog\/best-practices-for-incorporating-video-in-your-website\/","og_site_name":"Heart Internet","article_publisher":"https:\/\/www.facebook.com\/heartinternet\/","article_published_time":"2019-01-30T12:30:06+00:00","og_image":[{"width":1100,"height":733,"url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/01\/video-camera-filming.jpg","type":"image\/jpeg"}],"author":"Eliot Chambers-Ostler","twitter_card":"summary_large_image","twitter_creator":"@heartinternet","twitter_site":"@heartinternet","twitter_misc":{"Written by":"Eliot Chambers-Ostler","Estimated reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.heartinternet.uk\/blog\/best-practices-for-incorporating-video-in-your-website\/#article","isPartOf":{"@id":"https:\/\/www.heartinternet.uk\/blog\/best-practices-for-incorporating-video-in-your-website\/"},"author":{"name":"Eliot Chambers-Ostler","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28"},"headline":"Video killed my data plan: Best practices for incorporating video","datePublished":"2019-01-30T12:30:06+00:00","mainEntityOfPage":{"@id":"https:\/\/www.heartinternet.uk\/blog\/best-practices-for-incorporating-video-in-your-website\/"},"wordCount":1928,"commentCount":2,"publisher":{"@id":"https:\/\/heartblog.victory.digital\/#organization"},"image":{"@id":"https:\/\/www.heartinternet.uk\/blog\/best-practices-for-incorporating-video-in-your-website\/#primaryimage"},"thumbnailUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/01\/video-camera-filming.jpg","articleSection":["Guest Posts","Web Design"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.heartinternet.uk\/blog\/best-practices-for-incorporating-video-in-your-website\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.heartinternet.uk\/blog\/best-practices-for-incorporating-video-in-your-website\/","url":"https:\/\/www.heartinternet.uk\/blog\/best-practices-for-incorporating-video-in-your-website\/","name":"Video killed my data plan: Best practices for incorporating video - Heart Internet","isPartOf":{"@id":"https:\/\/heartblog.victory.digital\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.heartinternet.uk\/blog\/best-practices-for-incorporating-video-in-your-website\/#primaryimage"},"image":{"@id":"https:\/\/www.heartinternet.uk\/blog\/best-practices-for-incorporating-video-in-your-website\/#primaryimage"},"thumbnailUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/01\/video-camera-filming.jpg","datePublished":"2019-01-30T12:30:06+00:00","description":"Learn the best practices for incorpating video on your websites so you don't end up creating sites that are bloated with huge video files","breadcrumb":{"@id":"https:\/\/www.heartinternet.uk\/blog\/best-practices-for-incorporating-video-in-your-website\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.heartinternet.uk\/blog\/best-practices-for-incorporating-video-in-your-website\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.heartinternet.uk\/blog\/best-practices-for-incorporating-video-in-your-website\/#primaryimage","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/01\/video-camera-filming.jpg","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2019\/01\/video-camera-filming.jpg","width":1100,"height":733},{"@type":"BreadcrumbList","@id":"https:\/\/www.heartinternet.uk\/blog\/best-practices-for-incorporating-video-in-your-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.heartinternet.uk\/blog\/"},{"@type":"ListItem","position":2,"name":"Video killed my data plan: Best practices for incorporating video"}]},{"@type":"WebSite","@id":"https:\/\/heartblog.victory.digital\/#website","url":"https:\/\/heartblog.victory.digital\/","name":"Heart Internet","description":"","publisher":{"@id":"https:\/\/heartblog.victory.digital\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/heartblog.victory.digital\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/heartblog.victory.digital\/#organization","name":"Heart Internet","url":"https:\/\/heartblog.victory.digital\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp","width":992,"height":252,"caption":"Heart Internet"},"image":{"@id":"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/heartinternet\/","https:\/\/x.com\/heartinternet","https:\/\/www.linkedin.com\/company\/heart-internet-ltd"]},{"@type":"Person","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28","name":"Eliot Chambers-Ostler","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/image\/","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg","caption":"Eliot Chambers-Ostler"},"url":"https:\/\/www.heartinternet.uk\/blog\/author\/eliot-chambers-ostler\/"}]}},"_links":{"self":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts\/20116","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/comments?post=20116"}],"version-history":[{"count":0,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts\/20116\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/media\/20176"}],"wp:attachment":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/media?parent=20116"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/categories?post=20116"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/tags?post=20116"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}