YouTube
Akzeptiert eine YouTube-Video-URL oder eine Video-ID und wandelt sie in einen eingebetteten Block um. Das Dokument speichert nur die 11-stellige Video-ID und die Breite, nicht die vollständige URL, und ein neues Video beginnt zentriert mit einer Breite von 70 %.
Die Breite wird aus festen Schritten gewählt, und die Ausrichtung wird im Absatz gespeichert, der das Video umgibt. Im Editor wählt der erste Klick das Video aus; nachdem es ausgewählt ist, kann durch einen weiteren Klick das Abspielen gestartet werden. Um die Adresse zu ändern, löschen Sie das Video und fügen Sie ein neues ein.
npm install nabi-noteimport {
createNabiWith, mountSurface, mountToolbar, mountContextToolbar,
mountHints, watchSettle, codeWing, imageWing, youtubeWing,
mountViewTools,
} from 'nabi-note'
const selected = [
codeWing,
imageWing,
youtubeWing,
]
const { nabi, registry } = createNabiWith(selected)
// Bring your own highlighter (Prism, highlight.js, Shiki, …) — the wing stays as it is
// and only the attach is swapped (`makeCodeAttach` ships from the same door)
// { ...codeWing, attach: makeCodeAttach({ highlight: (source, lang) => [{ text: source }] }) }
const root = document.querySelector('.nabi')!
const content = document.querySelector('.nabi-content')!
// The locale also sets the direction — Arabic and Urdu run right to left
mountSurface({ nabi, registry, root: content, locale: 'de' })
const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale: 'de' }
const toolbar = mountToolbar({ ...shared, root: document.querySelector('#toolbar')! })
const context = mountContextToolbar({ ...shared, root: document.querySelector('#context')! })
mountHints({ toolbar, context, root, surface: content })
// The preview and fullscreen buttons — they stand their own box at the end of the row
mountViewTools({ ...shared, root, container: document.querySelector('#toolbar')! })
// on every change — hook up your own code here
// nabi.onChange(() => user_callback(nabi.getHtml()))const selected = wings().use('youtube').build()CSS-Stile
Verwenden Sie .nabi-content iframe, um den Rand oder die Ecken des Videos zu ändern. Ändern Sie nicht die gespeicherte Breite oder Ausrichtung.
.article-body iframe {
border-radius: 14px;
box-shadow: 0 10px 28px rgb(0 0 0 / 16%);
}Das Paket verwendet aspect-ratio, Breite und Ausrichtungsabstände, um die korrekte Größe des Videos beizubehalten; überschreiben Sie diese daher nicht.