Embedding videos

[salmanhk]

Is there any way of embedding a youtube or vimeo video in the markdown files?
Thanks for the great template.

[timlrx]

you can just copy and paste the youtube iframe code directly to the mdx file.

[anushkaguptaaa]

This somewhat works but not fully xD
I'm not sure if I can even explain what this is doing.

Overlaying on the whole website I believe.

[ray-android]

Use this style should fix your issue

  style={{
    width: '560px',
    height: '315px',
  }}

[anushkaguptaaa]

This does works but only for the desktop.

It looks pretty shabby when opened in mobile. How do I make it relative?

[ray-android]

The style I use is as follows. Feel free to tweak it until it suits your preferences.

        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          height: '100%',
        }}

[anushkaguptaaa]

Thank you Ray!

This helped me get some direction!
I got mine working as I want it to. I'll explain it here itself for posterity sake.
I'd be happy to add it as an article in this repo, if @timlrx finds it useful.

I went 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, I went and enclosed 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.

Now the video embed is working perfectly in both, desktop and mobile!! Static video issue is resolved.

Rendered pages:

Hoping this would help someone in the future! 🥳 ✨

[2wendyliu]

Hello Timothy! Nice to hear from you. And thank you so much for making the code available. I am planning to use it to build a band site with data/music, data/blog and data/memberbio to replace my old and buggy Drupal 7 site. This feels like an impossible task as I am new to github, nextjs, tailwind, etc. But I love the idea of having my blog and songs stored in mdx with nestable paths. Your code on GitHub gave me a place to start. My next challenge is to modify the code to fit my directory structure. Do you mind pointing out the files to modify? Thank you so so much! Wendy

…

On Sun, Nov 14, 2021 at 3:10 AM Timothy ***@***.***> wrote: In this case, you should standardize a frontmatter field e.g. youtube across all your markdown documents. This will contain the youtube URL link. Since all frontmatter information is passed to the layout, you can extract it over there: https://github.com/timlrx/tailwind-nextjs-starter-blog/blob/master/layouts/PostLayout.js#L20 const { slug, fileName, date, title, tags, youtube } = frontMatter and render the video as desired. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#116 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AWISIMQQJTUXKNYS2BIL4LLUL6KKNANCNFSM5AMMTVSQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[timlrx]

Hi Wendy, yes it will be quite challenging if you are new to react / nextjs. You probably won't want to store the music and songs with the website, but use a file sharing service like youtube. Each mdx file in data/music can then contain a frontmatter link to the song as described above. As to the files to modify, for each folder / section you include in data, you probably want a page for it. You can copy the pages/blog example and modify it so you get a page/music.

You will then need to modify them to source the content from the right folder, by modifying blog to the appropriate folder name e.g. https://github.com/timlrx/tailwind-nextjs-starter-blog/blob/master/pages/blog/%5B...slug%5D.js#L10

You would probably want to customize and use a different template for each page type. You can add a new layout to the layouts folder and modify the DEFAULT_LAYOUT field over here

[2wendyliu]

Great. I will follow your instructions to give it a try. How should I modify components/Pagination.js as it contains "/blog/" Thanks, Wendy

…

On Sun, Nov 14, 2021 at 8:39 PM Timothy ***@***.***> wrote: Hi Wendy, yes it will be quite challenging if you are new to react / nextjs. You probably won't want to store the music and songs with the website, but use a file sharing service like youtube. Each mdx file in data/music can then contain a frontmatter link to the song as described above. As to the files to modify, for each folder / section you include in data, you probably want a page for it. You can copy the pages/blog example and modify it so you get a page/music. You will then need to modify them to source the content from the right folder, by modifying blog to the appropriate folder name e.g. https://github.com/timlrx/tailwind-nextjs-starter-blog/blob/master/pages/blog/%5B...slug%5D.js#L10 You would probably want to customize and use a different template for each page type. You can add a new layout to the layouts folder and modify the DEFAULT_LAYOUT field over here <https://github.com/timlrx/tailwind-nextjs-starter-blog/blob/master/pages/blog/%5B...slug%5D.js#L7> — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#116 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AWISIMVIEUC4O3ZTHOUBFFTUMCFJTANCNFSM5AMMTVSQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.