# Встроенный код

элемент встроенный код позволяет встраивать веб-страницы, видео, аудио или другой интерактивный контент из внешних источников, также имеется возможность вставки скорм-пакетов и исполняемого кода (например, Яндекс карт).

<figure><img src="/files/YvmI4eky7Ol8lN0TkGn6" alt=""><figcaption></figcaption></figure>

**Кликните по элементу чтобы увидеть его настройки в правом боковом меню.**

<figure><img src="/files/PS7GuofoTuL5fL0JakPs" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Встроенный код может работать с тремя типами данных: HTML-кодом, ссылкой на веб-сайт или zip-файлом (например, пакетом SCORM)
{% endhint %}

### 1. HTML-код

Чтобы добавить HTML-код, выберите опцию «HTML» в настройках элемента, нажмите "Редактировать HTML" и вставьте встроенный HTML-код в появившемся окне.

<figure><img src="/files/v5Nmjqsb7fa7M2lV4HwG" alt=""><figcaption></figcaption></figure>

### 2. Ссылка

Чтобы добавить ссылку, выберите опцию «Ссылка» в настройках элемента и вставьте ссылку.

<figure><img src="/files/4UFhxTijp5DKYZIoazWR" alt=""><figcaption></figcaption></figure>

### Поддерживаемые ссылки:

1. Youtube (Только embed-ссылки)
2. Vimeo
3. Google Docs / Slides / Sheets
4. Google Maps
5. Miro, Figma (Только embed-ссылки)
6. JSFiddle, CodePen (Через специальный embed)
7. Ваши собственные сайты, если они поддерживают iframe

{% hint style="info" %}
Для Vimeo: видео должно быть разрешено к встраиванию на вашем домене. Если видео ограничено настройками приватности, оно может не загрузиться
{% endhint %}

{% hint style="success" %}
Примеры ссылок:\
<https://www.youtube.com/embed/VIDEO_ID>\
<https://player.vimeo.com/video/VIDEO_ID>\
<https://www.google.com/maps/embed?...>
{% endhint %}

### Неподдерживаемые ссылки:

1. Обычные YouTube ссылки
2. Vimeo-ссылки с приватными настройками
3. Ссылки на сайты, запрещающие встраивание (Facebook, Instagram, GitHub)
4. HTTP-сайты (без HTTPS), если страница работает по HTTPS
5. Ссылки, требующие входа в аккаунт

{% hint style="danger" %}
Если вставленная ссылка делает перенаправление на авторизацию или другой сайт, то внутри встроенного кода она может не отобразиться или зависнуть на переадресации. То же самое произойдет если сайт требует чтобы у пользователя была сессия (например, авторизация в Google Docs).&#x20;
{% endhint %}

{% hint style="warning" %}
**Многие сайты запрещают показ в iframe**\
\
1\. Если у сайта выставлен заголовок:&#x20;

\
"X-Frame-Options: DENY"\
\
или\
\
"X-Frame-Options: SAMEORIGIN"\
\
вставка в iframe с другого домена не сработает — браузер заблокирует загрузку.\
\
2\. Если сайт выставил CSP-заголовок, ограничивающий встраивание, например:

\
"Content-Security-Policy: frame-ancestors 'none';"\
\
или\
\
"Content-Security-Policy: frame-ancestors 'self';"\
\
то он не загрузится внутри iframe.<br>
{% endhint %}

{% hint style="info" %}
Если сайт работает по https\://, а во встроенный код вставлена http\:// ссылка, браузер может заблокировать это как смешанный контент (mixed content).
{% endhint %}

### 3. Архив

В настройках элемента выберите «Архив» и загрузите SCORM-пакет.

<figure><img src="/files/9ib36MpyyobVG0DJUMdH" alt=""><figcaption></figcaption></figure>

Подробнее о том, как прикрепить SCORM-пакет читайте [тут](/how-to/kak-prikrepit-skorm-paket-v-kurs-na-platforme-linda.md).

{% hint style="info" %}
С обновлением 2.56 в элементе **«Встроенный код»** теперь тоже есть настройки условий прохождения.

Мы добавили три варианта отслеживания в зависимости от условий прохождения:

1. **«Нет»** – не отслеживать (то есть без условий прохождения).
2. **«Скорм пройден»** – отслеживать статус Complete, который передает SCORM-пакет или встроенный элемент.
3. **«Клик на элемент»** – отслеживать, чтобы студент сделал хотя бы один клик в элементе **«Встроенный код»**.
   {% endhint %}

<details>

<summary>Как работает отслеживание HTML и ссылок</summary>

Чтобы настроить отслеживание, нужно в файл или в элемент, открывающийся по ссылке, вставить код:

window\.parent.postMessage({ type: 'complete' }, '\*');

Например, вы можете создать элемент для проверки знаний при помощи ИИ и попросить его передавать статус **Complete**. Так, когда файл или элемент завершится, он будет пройден и на платформе Линда.

</details>

<figure><img src="/files/WZYMXNexoCd2ueyMxfmk" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.lynda.ru/osnovnye-komponenty-sistemy/element/oformlenie/vstroennyi-kod.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.