DeskDirector Forms - Embed content

Jason He Updated by Jason He

DeskDirector forms provide many options in collecting information, but it also has the capability to provide information, such as videos to demonstrate how to trouble shoot certain issues.

In order to embed video or other external content into forms, you need to be familiar with Markdown and HTML/CSS. Field's description supports markdown, which you can also put raw HTML code inside.

While we allowed adding videos into the field description before, there was no way to help style the width and height of the embedded video. With the latest client portal release, you can easily achieve styling with CSS class. We will demonstrate how to do that below:

<div class="ddf-ratio ddf-ratio-16x9">
  <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe>
</div>

The above snippet will render the embedded Youtube video with a 16:9 ratio. Our CSS class supports several common aspect ratios.

  • 1x1 - ddf-ratio ddf-ratio-1x1
  • 4x3 - ddf-ratio ddf-ratio-4x3
  • 16x9 - ddf-ratio ddf-ratio-16x9
  • 21x9 - ddf-ratio ddf-ratio-21x9

Here are examples of HTML code of the aspect ratios mentioned above:

<div class="ddf-ratio ddf-ratio-1x1">
  <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe>
</div>
<div class="ddf-ratio ddf-ratio-4x3">
  <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe>
</div>
<div class="ddf-ratio ddf-ratio-16x9">
  <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe>
</div>
<div class="ddf-ratio ddf-ratio-21x9">
  <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe>
</div>
Frequently asked questions:

Q: Which portal version will support above CSS class?

A: From web portal 3.13.17 or desktop portal 3.3.x and above.

Q: Can those CSS class be used with other iframe? Such as website or Microsoft Calendar?

A: Yes, it can be used for any kind of embed.

Q: Other than ratio, is that possible to make height equal to the iframe's content height?

A: No, as of year 2020, there is no way to use CSS class to determine iframe's content height. That's why ratio has been used.

Q: How come embedded content is not rendered with correct ratio inside admin portal's form editor?

A: As 28th of Sep 2020, admin portal has not yet supported ddf-ratio CSS class. We will add them on next admin portal release.

How did we do?

DeskDirector Forms - Sections and Conditionals

DeskDirector Forms - Title Automation

Contact