Video Slice

[00:00] Jump into Slice Machine, and create a Slice called 'EmbedSection'.

[00:06] Add a Select field called "Background Color" that contains the values 'Grey' and 'Green'. The design for this Slice requires a text field to be used for a title or other info, so add that and call it 'Text'. Update the Rich Text field settings to allow multiple paragraphs.

[00:27] Add a new embed field called 'Embed'. The embed field allows you to add valid o embed URL like YouTube, Vimeo, or SoundCloud. This is why we call this section 'EmbedSection' and not 'VideoSection'. We're describing the structure, not the content remember. Since all of Mr McDonald's videos are hosted on YouTube, this is what you'll need. Click 'Save to file system'.

[00:49] Head back to your local project and navigate to the new 'EmbedSection' folder and open the index.js file. Replace the placeholder text with a couple of divs that have the Tailwind styling for the video section. You can copy this code from the video transcript:

<div className="grid justify-center items-center text-center w-screen h-screen bg-grey">
  <div className="container gap-8 flex flex-col items-center">
  </div>
</div>

[01:03] Import the Prismic Rich Text component from the React package:

import { PrismicRichText } from "@prismicio/react"

[01:14] and add the code snippet for the text field from Slice Machine.

<PrismicRichText field={slice.primary.text} />

[01:25] Create a variable for the background color:

const backgroundColor = {
  Grey: 'bg-grey',
  Green: 'bg-greenGrey',
}

[01:43] Then add the background color option from the select field to the dev using temporal literates:

<div className={`grid justify-center items-center text-center w-screen h-screen ${slice.primary.background_color ? backgroundColor[slice.primary.background_color] : backgroundColor.Grey}`}>

[02:01] Finally, add the embed code snippet from Slice Machine to the Slice. The snippet uses dangerouslySetInnerHTML to escape the content of slice. primary.embed.html:

<div dangerouslySetInnerHTML={{ __html: slice.primary.embed.html }} />

[02:10] That's the video setup. You can test this by simulating your Slice, Update and save the mock data with this YouTube link:

https://www.youtube.com/watch?v=6_ksC95mr9w&t=9s

[02:25] Take a screenshot, take a look at yourself, you good-looking developer, and if you're happy with the Slice, save your work.