I have MDX article. I need to add <video> tag with video being in src/assets folder
#How to add video to MDX
tulip granite
limpid rootBOT
Hi @tulip granite. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
To add a video to your MDX content in Astro, you can use the HTML <video> tag directly in your MDX file. If your video file is located in the src/assets directory, you can reference it like this:
<video width="320" height="240" controls>
<source src="../assets/your-video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Please replace your-video.mp4 with the actual name of your video file. The ../assets/ path assumes that your MDX file is located in the src/pages directory. If your MDX file is located elsewhere, you may need to adjust the path to your video file accordingly.
Remember that the video tag should be used within the MDX content and not in the frontmatter section of the MDX file.
For more information on using MDX with Astro, you can refer to the Astro documentation (https://docs.astro.build/en/guides/integrations-guide/mdx/).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
tulip granite
I have different base for dev and prod evinromnemt @limpid root
limpid rootBOT
Let me check the knowledge base for you. One moment! :books:
In Astro, the base configuration option sets the base path for your project. This is used as the root for your pages and assets in both development and production builds. However, it's important to note that the base option is not environment-specific and will apply to both development and production environments.
If you need to have different base paths for development and production, you could potentially use environment variables to achieve this. Astro includes a few environment variables out-of-the-box, such as import.meta.env.MODE, which indicates the mode your site is running in (development when running astro dev and production when running astro build).
Here's an example of how you might use an environment variable to set a different base path for development and production:
export default defineConfig({
base: import.meta.env.MODE === 'production' ? '/prod-base-path' : '/dev-base-path',
// other config options...
});
In this example, if the site is running in production mode, the base path will be set to '/prod-base-path'. If the site is running in development mode, the base path will be set to '/dev-base-path'.
Remember to replace '/prod-base-path' and '/dev-base-path' with your actual base paths.
For more information on Astro's configuration options and environment variables, you can refer to the Astro documentation (https://docs.astro.build/en/reference/configuration-reference/).
Sources:
- Astro Configuration Reference (https://docs.astro.build/en/reference/configuration-reference/)
- Astro Environment Variables (https://docs.astro.build/en/guides/environment-variables#default-environment-variables)