After blogging for more than a decade, I have realized that a blog post is kinda incomplete without some visual treat. The process of adding images is more or less the same. Considering the growing popularity of JAMstack sites, I've decided to write about how you can embed videos in markdown with Gatsby. Coding in markdown brings so much ease and when I tried looking for ways to embed videos in Gatsby. If you visit the Gatsby plugin library and type the keywords around embed videos, you'll find multiple results.
Instead, I ask you to try some of these and find a suitable match I've decided to make your job easy.
Subscribe to RSS
So, after trying a couple of awesome video embedding plugins I've managed to find the best solution for you. The plugin is called the gatsby-remark-embed-videoand it is one of the most intuitive plugins which you find in this particular niche. And I am so glad to tell that the plugin met my development needs to the fullest.
The first step is that you must have a demo Gatsby site up and running. If you are an absolute beginner, I'd recommend you to begin with the gatsby-starter-blog theme. It showcases the most basic representation of a Gatsby site which is the perfect requirement for any beginner to get started.
Next, add gatsby-remark-embed-video plugin to the gatsby-config. In this file, you'll find all the site configuration options which are placed in the root folder.
One of these configuration options is for plugins. Here, you find a plugins array which implements Gatsby APIs. Like most of the Gatsby plugins, gatsby-remark-embed-video also supports advanced options which I am going to explain now. Moreover, the plugin is designed to embed videos in markdown which means it requires some pre-requisite plugins as well i. All the aforementioned plugins will support gatsby-remark-embed-video to render videos in markdown.
Also, there are some important conditions which you have to ensure while using this plugin, i. If your site is using the gatsby-remark-responsive-iframe plugin, you have to ensure that the gatsby-remark-embed-video is defined first like this:. The gatsby-remark-embed-video plugin is used to embed videos from multiple video streaming platforms like YouTubeVimeoTwitchetc. In each case of these cases, you can embed the video by typing the following in your markdown file.
The above code snippet tells that the process is pretty simple. Either of these two formats can embed the videos:.
And each video source is prepended by the name of the video host i. Note that in each case, the type of video host is quite evident, i. So, by following this format, you can embed as many videos from multiple video hosts.
Let's quickly jump on to a practical example where I am going to show you how to use this plugin. Like I have mentioned before I am using the gatsby-starter-blog theme for this article so, I'll be working in its gatsby-config. Only three steps and embed as many videos as you want in your Gatsby sites. I even tried coding this functionality myself.
But the easiest method of embedding video in a Gatsby site is to source it from sites like YouTube, Vimeo, or Twitch.GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together. Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
Already on GitHub? Sign in to your account. It is working as expected and allows a user to see iframe video on full screen. Skip to content. Dismiss Join GitHub today GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together. Sign up. New issue. Conversation 1 Commits 3 Checks 2 Files changed. Copy link Quote reply.
Description Added allowFullScreen attribute in iframe. Add allowFullScreen attribute to iframe. This comment has been minimized.
Essential Gatsby plugins. Part 2, Markdown
Sign in to view. Hide details View details gillkyle merged commit dbc0 into gatsbyjs : master Oct 6, 19 checks passed. Danger All good. Peril All green. Sign up for free to join this conversation on GitHub. Already have an account?
Sign in to comment. Linked issues. Add this suggestion to a batch that can be applied as a single commit. This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed. Suggestions cannot be applied while viewing a subset of changes.
Change your preferences any time. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.
I want to set locales from Contentful as siteMetaData in Gatsby but I guess we can't run methods like this in gatsby-config.
I've read the gatsby-config. I thought about using gatsby-node. Update 2 March : I've also tried getting the data directly inside siteMetadata in gatsby-config.
I've coded this into gatsby-node. However, I can't figure out how to do it so that defaultLocale is nested in siteMetadata rather than top level in site. So close! Learn more. How to set data from third-party api as siteMetaData in Gatsby? Ask Question. Asked 1 month ago. Active 1 month ago. Viewed 76 times.
Well, there's nothing that'd guarantee that your defaultLocale will be populated with the right properties before you call module. What I'd do in this situation is use gatsby-node. I'm looking through gatsby-node docs but can't see an appropriate API. Which one is it that sets siteMetaData from gatsby-node. Actually, it looks like the context I was taking about can be used when you're creating pages inside gatsby-node.
Pages inside of the pages directory wouldn't take advantage of it. Thanks for clarifying. I did briefly think of making the navbar into pages with locales in them but that would mean using it as an iframe rather than a component.
Probably won't do that though. I am wondering if a custom plugin would do the trick here for your case - github. Inside gatsby-node. Active Oldest Votes. Sign up or log in Sign up using Google.GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together. Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
What I don't understand is why childMarkdownRemark is not in my schema if it's supposed to "just work. Maybe I should note that I am using the advanced-starter and it has this as the config for the plugin setup by default:. Here's my schema autocomplete response for the inner body of my content model.
I would guess that there's no configuration on the plugin that is needed because other examples on github just have gatsby-transformer-remark listed in their gatsby-config. This whole time it's been the gatsby-transformer-remark version that has kept it from not showing in my schema.
I changed my package. Wish I had a clue why this didn't install properly or work out of the box. At least I can get moving again building this. I am loving Gatsby btw! I had to run off to work when I posted that earlier so I actually didn't get a chance to try it out until now on my lunch break. Any idea why the schema inside childMarkdownRemark would not have html? Does my markdown need to have frontmatter in the contentful field to render the html?
See screenshot: Only frontmatter is listed After more tinkering, it turns out it was related to the way it was defined in the config file entry shown. I commented it out and just included: gatsby-transformer-remark in the gatsby-config. So is this a bug with gatsby-remark-images?
Or perhaps that's not usable with pulling source from contentful? Hopefully this helps someone else who is trying to use contentful and uses the advanced-starter as a springboard. I'm trying to get excerpt inside the childMarkdownRemark but it returns an empty string, any idea why? Yeah i'm having issues with it too, i just get "message": "getNodesByType is not a function". Skip to content. Dismiss Join GitHub today GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.
Sign up. New issue. Jump to bottom. Copy link Quote reply. This comment has been minimized. Sign in to view. And if this isn't enough, you gotta describe more what the issue is as your query looks correct. Contributor Author.Gatsby is an incredible static site generator that allows for React to be used as the underlying rendering engine to scaffold out a static site that truly has all the benefits expected in a modern web application.
Gatsby recently released a v1. Gatsby ships with a great CLI command line interface that contains the functionality of scaffolding out a working site, as well as commands to help develop the site once created. This command will create the folder personal-blog and then change into that directory.
A working gatsby statically generated application can now be developed upon. The Gatsby CLI includes many common development features such as gatsby build build a production, statically generated version of the projectgatsby develop launch a hot-reload enabled web development serveretc.
We can now begin the exciting task of actually developing on the site, and creating a functional, modern blog. Gatsby supports a rich plugin interfaceand many incredibly useful plugins have been authored to make accomplishing common tasks a breeze. Plugins can be broken up into three main categories: functional plugins, source plugins, and transformer plugins.
Functional plugins either implement some functionality e. Source plugins create nodes which can then be transformed into a usable format if not already usable by a transformer plugin.
For instance, a typical workflow often involves using gatsby-source-filesystemwhich loads files off of disk—e. Some explanation will be helpful here! Now that Gatsby knows about our source files, we can begin applying some useful transformers to convert those files into usable data! As mentioned, a transformer plugin takes some underlying data format that is not inherently usable in its current form e. Markdown, json, yaml, etc. Jointly, the filesystem source plugin will load file nodes as Markdown off of our filesystem, and then the Markdown transformer will take over and convert to usable HTML.
Seems like a lot of set up, but collectively these plugins are going to super charge Gatsby, and give us an incredibly powerful yet relatively simple!Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps. Go Beyond Static Websites. Get all the benefits of static websites with none of thelimitations. Gatsby sites are fully functional React apps so you can create high-quality,dynamic web apps, from blogs to e-commerce sites to user dashboards.
Use a Modern Stack for Every Site. Build a uniform workflow for you and your team, regardless ofwhether the data is coming from the same backend. Load Data From Anywhere. Performance Is Baked In. Ace your performance audits by default. Gatsby automates codesplitting, image optimization, inlining critical styles, lazy-loading, and prefetching resources,and more to ensure your site is fast — no manual tuning required. Host at Scale for Pennies. Learn how to use Gatsby for your next project.
You can get a new Gatsby site up and running on your local dev environment in 5 minutes with these four steps:. Save your changes, and the browser will update in real time! For additional information on how you can customize your Gatsby site, see our plugins and the official tutorial. Full documentation for Gatsby lives on the website.
For most developers, we recommend starting with our in-depth tutorial for creating a site with Gatsby. It starts with zero assumptions about your level of ability and walks through every step of the process. To dive straight into code samples head to our documentation. We welcome suggestions for improving our docs.
Already have a Gatsby site? These handy guides will help you add the improvements of Gatsby v2 to your site without starting from scratch! Gatsby is dedicated to building a welcoming, diverse, safe community. We expect everyone participating in the Gatsby community to abide by our Code of Conduct.
Please read it. Please follow it. In the Gatsby community, we work hard to build each other up and create amazing things together.This will make your blog seem much more lively to anyone visiting it.
If these concerns outweigh the benefits of Disqus, you may want to look into some of the other options above. We welcome pull requests to expand this guide with setup instructions for other services.
Where identifier must be a string or number that uniquely identifies the post. You should now see the Disqus comment form appear beneath your blog post looking like this. Happy blogging! It is low maintenance, meaning moderating your comments and maintaining your forum less hassle. It provides official React support. It offers a generous free tier. It seems to be by far the most widely used service. You can register with your Google, Facebook or Twitter account and users can more seamlessly share the comments they write through those channels.
The Disqus UI has a distinct but unobtrusive look that many users will recognize and trust. Implementing Disqus Here are the steps for adding Disqus comments to your own blog: Sign-up to Disqus.
This is how Disqus will identify comments coming from your site. Copy that for later.