Работа с изображениями и видео

«Всё должно быть благопристойно и чинно» (1 Кор. 14:40).

🖼️ 1. Работа с изображениями

---

title: “Работа с изображениями и видео” slug: images-and-video description: “Краткое руководство по вставке изображений и видео в MDX для Starlight/Astro.” tags:

• media
• images
• video
• mdx cover: /assets/ms-sock-3.png

---

«Всё должно быть благопристойно и чинно» — 1 Кор. 14:40

🖼️ Изображения

Для простых картинок используйте Markdown-синтаксис (пути — от корня public/):

![Альтернативный текст](/assets/путь-к-картинке.jpg)

Важно: не включайте public в путь — система раздаёт содержимое из public/.

Центрирование (MDX / JSX)

В MDX удобно использовать JSX-обёртки для управления стилями:

<div style={{ textAlign: 'center' }}>
  <img
    src="/assets/bert.png"
    alt="Пример"
    style={{ maxWidth: '100%', height: 'auto', display: 'block', margin: '0 auto' }}
  />
</div>

📺 Видео (YouTube и локальные файлы)

Встраивание YouTube — базовый iFrame

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/ВАШ_КОД"
  title="YouTube video player"
  frameBorder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowFullScreen
></iframe>

Код видео берётся из ссылки после v=: https://www.youtube.com/watch?v=dQw4w9WgXcQ → dQw4w9WgXcQ.

Адаптивный плеер (рекомендуется)

<div style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden' }}>
  <iframe
    src="https://www.youtube.com/embed/ВАШ_КОД"
    title="Видео"
    style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}
    frameBorder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowFullScreen
  />
</div>

Локальные видео

Если видео хранится в public/videos/:

<video width="100%" height="auto" controls poster="/assets/world_soc.jpg">
  <source src="/videos/conflikt/01_svidetelstvo_zhizni.mp4" type="video/mp4" />
  Ваш браузер не поддерживает видео.
</video>

Полезные советы

• Используйте понятные alt-тексты для доступности.
• Для SEO и соц. превью задавайте cover в frontmatter.
• В MDX избегайте смешения необработанных HTML-атрибутов; используйте JSX-совместимые свойства (style как объект).

---

Потребуется ли вам, чтобы я:

• добавил готовые React/MDX-компоненты для обёртки медиаконтента,
• сгенерировал примеры с вашими реальными путями к файлам,
• или привёл формат под конкретный шаблон (Astro/Mantine)?