The scenic lands of Canada featuring maple leaves, snow-capped mountains, turquoise lakes and Toronto. Take in the sights in this photo gallery exhibition and see how easy it is to replicate with some MDX magic and tailwind classes.

Features images served using next/image component. The locally stored images are located in a folder with the following path: /static/images/canada/[filename].jpg

Since we are using mdx, we can create a simple responsive flexbox grid to display our images with a few tailwind css classes.

Gallery

External Players

Internal Player

Implementation of Images

Its not too hard to implement these blocks in a post, just use the following available codes Implementation of images

<div className="-mx-2 flex flex-wrap overflow-hidden xl:-mx-2">
  <div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
    ![Maple](/static/images/canada/maple.jpg)
  </div>
  <div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
    ![Lake](/static/images/canada/lake.jpg)
  </div>
  <div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
    ![Mountains](/static/images/canada/mountains.jpg)
  </div>
  <div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
    ![Toronto](/static/images/canada/toronto.jpg)
  </div>
</div>

Implementation of Embeds

• ^For efficient youtube embeds (least page load) :

<YouTube video="lh8dNmneVyY" />

• ^For Hls manifests (based on vidstack) :

<Hls src="<YOUR_VIDEO_SOURCE>" thumbnails="<YOUR_PREVIEW_THUMBNAILS>" />

• ^For mp4 and others (based on vidstack) :

<Hola src="<YOUR_VIDEO_SOURCE>" poster="<YOUR_POSTER>" />

• ^For best youtube experience add the following parameters :

?autoplay=0&mute=1&controls=1&origin=https://origin.server&playsinline=1&showinfo=0&rel=0&iv_load_policy=3&modestbranding=1&enablejsapi=1&widgetid=3

With MDX v2, one can interleave markdown in jsx as shown in the example code. That's all for now.