Using Inline HTML Media in Nuxt Content Blog Starter

This is still a work in progress, I have ambitions to extract this into it's own module, but for now it's part of the blog starter.

Inline Images

Embedding internal or external images directly into your Markdown content enhances the visual appeal and context of your blog posts. Here's an example of how to embed an image using custom Markdown components in Nuxt Content:

::inline-image
---
images: 
  - src: nuxt-back-to-the-future.jpg || https://via.placeholder.com/150
    alt: Nuxt Custom Markdown Components
    // add multiple images to create a carousel
  - src: nuxt-back-to-the-future.jpg || https://via.placeholder.com/150
    alt: Nuxt Custom Markdown Components
caption: This is a caption for the image testing to see how it shows up
---
::

Single Inline Image

This is a caption for the image testing to see how it shows up

Carousel Image Embed

Embedding a carousel of images directly into your Markdown content enhances the visual appeal and context of your blog posts. Here's an example of how to embed a carousel of images using custom Markdown components in Nuxt Content:

Inline Video Embeds

handling html video embeds in markdown can be a bit tricky. We've made it as simple as possible, all you need is the path to the video and the caption you want to display. The component will handle the rest.

Browser Support for Video Formats

It's worth noting that browser support for video formats varies. Here's a handy table to help you decide which formats to use, a good rule of thumb is to use MP4 if available. WebM is a good fallback.

Video Markdown Component

::inline-html-video
---
video: 
  src: videos/html-video-mp4.mp4
  caption: This is a caption for the video testing to see how it shows up
options: // options are optional
  controls: true
  autoplay: true
  loop: true
  muted: true
  playsinline: true
  preload: auto
  poster: images/nuxt-back-to-the-future.jpg
---
::

MP4 Video

WebM Video

Ogg Video