shiroa

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.