nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How to embed a video to an article?

Daria Kulikova_GitProtect.io

Hello Community! Looking for your assistance

I noticed that sometimes some articles have videos embedded into their articles. So, I'm wondering how it is possible to insert a video into the article so that it looks nice within the text. Any advice on that issue?

Comments

Lucas Modzelewski _Lumo_

In HTML editor use <iframe> element
Check: https://www.w3schools.com/html/html_youtube.asp

like this one

<iframe width="420" height="345" src="https://www.youtube.com/embed/dQw4w9WgXcQ">

</iframe>

Andy Gladstone

@Daria Kulikova_GitProtect_io there are a few ways to accomplish this. While I am no expert on all of the ways it can be done, I generally use one method.

When editing an article you can use the Rich Text Editor and the HTML editor. I copy the HTML embed code for the video from the source (YouTube, Vimeo, etc.) and paste that code in to the HTML editor. From there I play with the video dimensions to get the right embed size on the page.

I hope this helps. I also hope that others see this and answer how they accomplish this as well.

Sandra Franchetto

I love being part of a Community where others help out and are quick to respond. 🫶👍

Daria Kulikova_GitProtect.io

Thank you, @Andy Gladstone , I will try this method

Daria Kulikova_GitProtect.io

Thank you @Lucas Modzelewski _Lumo_

Daria Kulikova_GitProtect.io

That's true @Sandra Franchetto , agree 💯

Alberto Estévez_qn3e7e

How do I switch from Rich Text to HTML editor? Thank you 😊

Daria Kulikova_GitProtect.io

Hello @Alberto Estévez ,

You need to switch from "Rich Text" to "HTML"

Frame 482198.png

Alberto Estévez_qn3e7e

Thank you for your help @Daria Kulikova_GitProtect_io
Looks like the option to switch views is only available to community leaders.

Newwave Solutions

For responsive iframe, check https://www.w3schools.com/howto/howto_css_responsive_iframes.asp

Example:

<div class="container">
<iframe class="responsive-iframe" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>