{"data":{"markdownRemark":{"html":"<p>GatsbyJS has a great plugin for embedding hosted videos to your markdown with <a href=\"https://www.gatsbyjs.org/packages/gatsby-remark-embed-video/?=video\">gatsby-remark-embed-video</a>.</p>\n<p>What if you want to add your add your own HTML5 videos, locally hosted from your static folder? Now you can with the <a href=\"https://www.gatsbyjs.org/packages/gatsby-remark-videos/?=videos\">gatsby-remark-videos</a> plugin.</p>\n<h2>When Not To Do This</h2>\n<p>Before you decide to do this, keep in mind that there are a number of reasons why you <strong><em>would not</em></strong> want to do this.</p>\n<ul>\n<li>\n<p><strong>Bandwidth</strong>: By hosting video on your own server, you add a lot of overhead to your gatsby project. An HD video file can easily weigh in at over 100MB! Too many requests for  a single large file can bring your whole project down. </p>\n</li>\n<li>\n<p><strong>Slow Loading</strong>: You force visitors to download your video files when they hit the page. If the files are large, you can run into all kind of performance issues. Some visitors will experience slow load times, and mobile users may not even get to see it. </p>\n</li>\n<li>\n<p><strong>Loss Of Visibility</strong>: YouTube and Vimeo are the most popular video hosting websites in the world. It is usually the place people go to when they are search for a topic. When you embed video from these websites, you take advantage of their popularity. By hosting your own video, your content loses a lot of visibility. </p>\n</li>\n<li>\n<p><strong>Piracy</strong>: If you want to protect your video content from being downloaded and redistributed illegally, you will want to make sure that your static files <a href=\"https://www.gatsbyjs.org/blog/2019-04-06-security-for-modern-web-frameworks/\">are secure</a>.</p>\n</li>\n</ul>\n<p>So when would you ever <strong><em>want</em></strong> to do this? </p>\n<p>If you are hosting relatively small videos and you don't care about security or visibility, then hosting your own video has a few benefits. For one, you dodge the YouTube/Vimeo web players which gives you more control over the user experience. You won't have links to related videos appear, or otherwise direct your visitors to other websites. You also gain some SEO exposure on your domain which can be a <a href=\"https://www.seoblog.com/2014/11/pages-youtube-videos-outrank-self-hosted-videos/\">determining factor</a>  when choosing between hosting sites and self-hosting.</p>\n<h2>How Do We Do It?</h2>\n<p>We will need two plugins to add video to our markdown. First, we need to install <a href=\"https://github.com/Mike-Dax/gatsby-plugin-ffmpeg\">gatsby-remark-plugin-ffmpeg</a> to convert our files to .mp4 and .webm files. </p>\n<p><code>npm install --save gatsby-remark-plugin-ffmpeg</code></p>\n<p>And we will also install <a href=\"https://github.com/Mike-Dax/gatsby-remark-videos\">gatsby-remark-videos</a> </p>\n<p><code>npm install --save gatsby-remark-videos</code></p>\n<p>which inserts will use the same syntax as markdown images, so that </p>\n<pre><code class=\"language-html\">![](video.avi)\n</code></pre>\n<p>will be inserted into the DOM like this: </p>\n<pre><code class=\"language-html\">&#x3C;video autoplay loop>\n    &#x3C;source src=\"/static/video-hash-optshash.webm\" type=\"video/webm\" />\n    &#x3C;source src=\"/static/video-hash-optshash.mp4\" type=\"video/mp4\" />\n&#x3C;/video>\n</code></pre>\n<p>Then add the following to your <code>gatsby-config.js</code>:</p>\n<pre><code>plugins: [\n  ...\n  gatsby-plugin-ffmpeg`,\n  {\n    resolve: `gatsby-remark-videos`,\n    options: {\n      pipelines: [\n        {\n          name: 'vp9',\n          transcode: chain =>\n            chain\n              .videoCodec('libvpx-vp9')\n              .noAudio()\n              .outputOptions(['-crf 20', '-b:v 0']),\n          maxHeight: 480,\n          maxWidth: 900,\n          fileExtension: 'webm',\n        },\n        {\n          name: 'h264',\n          transcode: chain =>\n            chain\n              .videoCodec('libx264')\n              .noAudio()\n              .videoBitrate('1000k'),\n          maxHeight: 480,\n          maxWidth: 900,\n          fileExtension: 'mp4',\n        },\n      ],\n    }\n  },\n  ...\n]\n</code></pre>\n<br>\n<br>\n<h5>...And there you have it!</h5>\n<br>\n<br>\n<p>\n      <div\n      class=\"gatsby-video-aspect-ratio\"\n      style=\"position: relative; display: block; padding-top: 100%;\"\n      >\n    <video autoplay loop preload style=\"position: absolute; top: 0; left: 10%; width: 80%; height: auto;\" >\n      <source src=\"/static/ocean1-e4b90b02a2214ba29732ad1aff4ff29e-4b25a.webm\" type=\"video/webm\"><source src=\"/static/ocean1-e4b90b02a2214ba29732ad1aff4ff29e-b1360.mp4\" type=\"video/mp4\">\n    </video>\n    </div>\n    </p>\n<br>\n<br>","excerpt":"GatsbyJS has a great plugin for embedding hosted videos to your markdown with  gatsby-remark-embed-video . What if you want to add your add your own HTML5 videos, locally hosted from your static folder? Now you can with the  gatsby-remark-videos  plugin. When Not To Do This Before you decide to do…","frontmatter":{"title":"Adding Local Videos To Gatsby Markdown Pages","date":"03.2019"},"fields":{"tags":["javascript","gatsbyjs"],"slug":"/gatsby-video/content/"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/gatsby-video/content/"}}