Embed Sanitized HTML Elements

There are a few media components provided by mediamedia module.

• iframeiframe: Embed an iframe in the document.
• videovideo: Embed a video in the document.
• audioaudio: Embed an audio in the document.
• divdiv: Embed a div in the document.

Example:

#media.iframe(

  outer-width: 640pt,

  outer-height: 360pt,

  attributes: (

    src: "https://player.bilibili.com/player.html?aid=80433022&bvid=BV1GJ411x7h7&cid=137649199&page=1&danmaku=0&autoplay=0",

    scrolling: "no",

    border: "0",

    width: "100%",

    height: "100%",

    frameborder: "no",

    framespacing: "0",

    allowfullscreen: "true",

  ),

)

#media.iframe(

  outer-width: 640pt,

  outer-height: 360pt,

  attributes: (

    src: "https://player.bilibili.com/player.html?aid=80433022&bvid=BV1GJ411x7h7&cid=137649199&page=1&danmaku=0&autoplay=0",

    scrolling: "no",

    border: "0",

    width: "100%",

    height: "100%",

    frameborder: "no",

    framespacing: "0",

    allowfullscreen: "true",

  ),

)

#media.iframe(

  outer-width: 640pt,

  outer-height: 360pt,

  attributes: (

    src: "https://player.bilibili.com/player.html?aid=80433022&bvid=BV1GJ411x7h7&cid=137649199&page=1&danmaku=0&autoplay=0",

    scrolling: "no",

    border: "0",

    width: "100%",

    height: "100%",

    frameborder: "no",

    framespacing: "0",

    allowfullscreen: "true",

  ),

)

#media.iframe(

  outer-width: 640pt,

  outer-height: 360pt,

  attributes: (

    src: "https://player.bilibili.com/player.html?aid=80433022&bvid=BV1GJ411x7h7&cid=137649199&page=1&danmaku=0&autoplay=0",

    scrolling: "no",

    border: "0",

    width: "100%",

    height: "100%",

    frameborder: "no",

    framespacing: "0",

    allowfullscreen: "true",

  ),

)

Check the Multimedia Components to see the result of the above code.

Explaination:

• outer-widthouter-width and outer-heightouter-height gives a the size to render at the position. You can either use the shiroa.page-widthshiroa.page-width or std.layoutstd.layout to determine a proper size.
• The mediamedia components currently doesn't get render in PDF output, so you have to provide the alternative content when is-pdf-targetis-pdf-target is truetrue.