The article that you see named Sahil Shah Recommends took more effort and pain than just the looks of it.

The video embed in that article which is now a dynamic thing was initally static and looked very very shabby. I went around to the Discussion's forum of the base project on which this website is built upon.

Got a lot of help from there.
Thanks Ray, for not giving up on me and answering my questions :)

The Problem

When I was using the iframe code for linking the YouTube video, it was not being rendered.

Upon inspection it showed div#sub-frame-error as shown in the image above. This turned out to be occuring due to Content Security Policy that was added recently which was blocking youtube.com

To resolve this issue, you have to whitelist youtube.com under frame-src and not script-src an error which I was making.

Voila! Your YouTube Video Embed is now working.

The Problem: Part 2

Having a working YouTube Video Embed on your website is only half-job done. It has to sit properly within the CSS components of your website and with the right size.

Still a quick-fix issue: Just change the width and height parameter in the iframe.

What is the bigger issue is for it to size according to the screen. It might look good in the desktop but not on mobile, and vice-versa.

Your embed should have dynamic sizing

Adding a simple CSS within the .mdx file will not work. It throws an error. The next thing that one would try is to put style element inside the iframe. Weirdly, that doesn't work either and leaves a Server Error.

Then I tried this

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/XNbtuhxNj6Q"
  title="45 Book Recommendations by @SahilShahcomedy (Part 1)"
  frameBorder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  allowFullScreen
  style={{
    position: 'absolute',
    top: 0,
    left: 0,
    width: '560px',
    height: '315px',
  }}
></iframe>

This did half the job xD Pretty funny in my opinion.

The Solution

Go to css/prism.css and added the following code in the bottom of the file.

.container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}
.video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Without making any explicit imports to the .mdx file, enclose the iframe in a div
Following is the tweaked code:

<div class="container" align="center">
  <iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/XNbtuhxNj6Q"
    title="45 Book Recommendations by @SahilShahcomedy (Part 1)"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowfullscreen
    class="video"
  ></iframe>
</div>

Here's the Link to the original article which gave me the idea in the first place.

And, we have finally resolved this issue.
If you are interested in reading the GitHub Discussion: Visit Discussion