Copy a link to an object: YouTube video, Instagram post, or another external resource. Add an embed to a post via the Add embed button in the right-hand panel. Paste the copied link into the corresponding text field.

The embed will automatically render and occupy the entire width of the post or the column allocated to it.

List of supported services:

As an HTML code

Copy embed HTML code from an external site. Add an embed via the Add embed button in the right-hand panel. Paste the copied code into the corresponding text field.

This code may contain attributes, such as width, height, opacity, etc. These parameters can be changed at your discretion.

Important note: inserting embeds via HTML codes is not available in the free version of Setka Editor.

Embed adaptivity settings

By default, most embeds automatically adapt to the area allocated to them: post or column width. Sometimes you may need to display an embed in its original size, with no stretch or squeeze. To disable Setka Editor's adaptivity algorithms:

1. Switch to the Embed tab on the top navigation panel.

2. Open the additional settings menu (▼ button).

3. Select off in the Responsive embed dropdown:

4. The embed will take the dimensions set in its code.

Some useful embeds

Code snippets

There are several ways to add a code block to your post:

Code highlighting services

E.g. PineTools:

1. Select the Syntax highlighter tool and paste the code into the Unhighlighted code field.

2. Select highlight options in the Options -> Language -> Select one menu or leave as auto (Autodetect).

3. Click Highlight.

4. Paste the highlighted code into an embed in the Setka Editor.

CodePen embeds

1. Register on CodePen.

2. Click Start Coding to create a new Pen.

3. To save changes, click the Save button in the bottom right corner.

4. Click Embed in the bottom right corner and copy the code.

5. Paste the code into an embed in the Setka Editor.

Highlighting syntax with highlight.js

1. Download the library from the project site. Place the file on your server.

2. Open the highlight.js guide and follow instructions from the Getting started section.

3. Place the code from below into <head> of your site's page:

<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

Please note that

/path/to/styles/default.css

and

/path/to/highlight.min.js

must be valid paths to a file downloaded in p. 1. If you will have any issues with placing the file via CMS, replace the paths to direct links on public CDNs.

4. Place the code block that you want to highlight, into an embed. Before that, you need to escape the characters of the code itself. E.g., via HTML Entities Encoder / Decoder. Make sure that your code is wrapped into corresponding tags:

<pre><code class="html">...</code></pre>

Forms

To add a form with a <form> tag in the code, modify the embed code, and paste it in this format:

<div id="%%unique_form_placeholder_name%%"></div>
<script>
  var uniqueFormHtml = '%%FORM CODE%%';
  var uniquePlaceholderEl = document.getElementById('%%unique_form_placeholder_name%%');
  if (uniquePlaceholderEl) uniquePlaceholderEl.innerHTML = uniqueFormHtml;
</script>

Replace %%unique_form_placeholder_name%% in the template into this form's unique ID.

%%FORM CODE%% is the whole form code in one row. E.g. transform

<form action="/subscribe">
<input type="text">
<button type="submit">Subscribe</button>
</form>

into:

<form action="/subscribe"><input type="text"><button type="submit">Subscribe</button></form>

Known issues

Facebook embeds on mobile

Embeds of some services may be displayed incorrectly. This is due to the fact that an independent document with predefined attribute values is placed inside the <iframe> </iframe> container.

If Responsive embed is set to on, its' content is cut at one side, to keep proportions. When stretching the embed to the width of the screen, check how the content of the mobile version will look, using the preview button on the right-hand panel.

Videos on mobile

Videos with Responsive embed turned off would not adapt to screen width on mobile. To allow shrinking or stretching to width, turn Embed -> Responsive embed to on:

Instagram embeds

Sometimes Instagram provides embed codes with irregular proportions and an overly large block of comments. It happens when inserting embeds via either a link or an HTML code. To return the block to the proper proportions:

1. Insert Instagram embed via HTML code. Inserting it as a link would not work in this method.

2. Add another embed with this HTML code anywhere in the post:

<style>iframe.instagram-media { position: relative !important; }</style>

This code will fix the proportions of all Instagram embeds in the post. You need to add it once. Despite the fact that the embed is visible in the editor, the reader will not see it in the final version of the post.

Important note: make sure the bottom indent is disabled for the above embed.

Embeds

Table of contents

Inserting embeds

As a link