Add Wistia example to style guide

SumoLogic · Dec 16, 2024 · c384a95 · c384a95
1 parent 7b064e5
commit c384a95
Showing 1 changed file with 49 additions and 0 deletions.
diff --git a/docs/contributing/style-guide.md b/docs/contributing/style-guide.md
@@ -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).
@@ -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.
+:::