Video and Netlify CMS

Netlify CMS
, ,
#1

I’m a beginner coder and I’ve hit a wall with Netlify CMS’s Gatsby starter. With the starter I’ve successfully added a cover image for each post, and have that image coming through on the index of all posts. I can also post images in the markdown body. All the images are processed with Gatsby Image :+1:

So my problem is: wherever I have the ability to use an image, I want to be able use an mp4 interchangeably (it’s a portfolio and 50% of it is animation). The videos are mostly short loops and <3mb, and I do not want to host the videos on youtube (ads!) or vimeo (subscription fees!).

The solution seems to be to make a widget from scratch, but I feel really overwhelmed the widget docs, just now tried to follow this tutorial but it was so specific for slides I have no idea how to apply the knowledge.

TLDR my question is
is there an existing widget somewhere that allows me to upload videos, NOT using an external host like youtube
or if not–
could someone give me advice on how to tackle this in a widget

I feel sure someone must have done this already with their cms. Any help greatly appreciated, thanks!

#2

You can use the file widget: https://www.netlifycms.org/docs/widgets/#file. If you want to restrict the type of file you want to upload, try adding a pattern property with a regex.

#3

thanks Tom! So file seems to work, my file is uploaded, I see it in the markdown and in the post directory, but I have my cover image coming in as a Gatsby Image, so when its an mp4 it’s undefined:
image

so I need some kind of if statement or regex to see if the file is a jpg/gif/png OR mp4, can I do that in graphql (query for ‘cover’ below)? I dont think I can?

mdx(fields: { slug: { eq: $slug } }) {
      id
      body
      frontmatter {
        title
        date(formatString: "YYYY")
        cover {
          childImageSharp {
            fluid(maxWidth: 1800) {
              ...GatsbyImageSharpFluid_noBase64
              ...GatsbyImageSharpFluidLimitPresentationSize

            }
          }
        }
      }
    }
#4

Hi, @steph. I just wanted to point out that this is now a question about Gatsby and graphql and not a Netlify specific question.

While someone may have answers here on our community site, our support team cannot consult on custom code so we likely won’t be providing answers to this question. (Again though, someone else here on the community might so it is still okay to ask this here.)

I just wanted to be clear about the boundaries of what our support team does and doesn’t answer (aka our Scope of Support). Note, even most paid plans don’t cover custom code and so this isn’t a limitation of “the free tier”.

To summarize, someone else may still answer this but our support team doesn’t have the resources to do so at this time.

#5

sorry Luke, will remove question. Gatsby doesn’t have a forum that’s why I tried here, apologies.

edit: seems I don’t have permission to delete the question

#6

no worries, steph, no need to delete. This still might be valuable for people who are looking for answers in the future!