Skip to content

Add Wistia example to style guide #4881

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Dec 19, 2024
Merged

Add Wistia example to style guide #4881

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 49 additions & 0 deletions docs/contributing/style-guide.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1533,6 +1533,8 @@ If you need to use mouse actions to be specific, use:

## Videos

### YouTube

To embed a YouTube video on a doc:

1. Copy and paste the following code into your page (including the `import Iframe` line).
Expand Down Expand Up @@ -1596,3 +1598,50 @@ import Iframe from 'react-iframe';

</TabItem>
</Tabs>

### Other video types

You can use similar coding to embed videos from other vendors than YouTube. Following is example coding to embed videos from Wistia.

<Tabs
className="unique-tabs"
defaultValue="Markdown"
values={[
{label: 'Markdown', value: 'Markdown'},
{label: 'Result', value: 'Result'},
]}>

<TabItem value="Markdown">

```html
<Iframe url="https://fast.wistia.net/embed/iframe/yebz0v90tx?web_component=true&seo=true&videoFoam=false"
width="854px"
height="480px"
id="wistiaVideo"
className="video-container"
display="initial"
position="relative"
allow="autoplay; fullscreen"
allowfullscreen
/>
```

</TabItem>
<TabItem value="Result">

<Iframe url="https://fast.wistia.net/embed/iframe/yebz0v90tx?web_component=true&seo=true&videoFoam=false"
width="854px"
height="480px"
id="wistiaVideo"
className="video-container"
display="initial"
position="relative"
allow="autoplay; fullscreen"
allowfullscreen
/>
</TabItem>
</Tabs>

:::note
Typically you must include `import Iframe from 'react-iframe';` with the markdown. It is not included in the example above because it was already called in the previous markdown for YouTube.
:::
Loading