Styling essentials

Styling of video content

Video content can be embedded in both the product and the blog pages. Use the embed code to include the link to the video. For example, a vimeo link to embed would look like:

<iframe title="vimeo-player" src="https://player.vimeo.com/video/571283036" width="640" height="360" frameborder="0" allowfullscreen></iframe>

To correctly style the element for all devices (desktop and mobile), you have to define a <div>-element around the iframe, like this:

<div class="embed-container cs_vimeo">
    <iframe title="vimeo-player" src="https://player.vimeo.com/video/571283036" frameborder="0" allowfullscreen></iframe>
</div>

The class definition in the <div> element is essential; it defines how the inner iframe will be styled. Note the height and width definitions have been removed.

You can embed the code in the editor using the embed button.

The styling is valid for both product pages and blog post pages.