This article explains in detail how to embed images and videos in your article.
Images
By specifying the URL of the image in the format "@image URL", you can embed and display that image within your article. The image can be hosted on your own web server or on an external data management system. As long as a permanent URL can be obtained, any image can be embedded.
@image https://dbmx.net/harunatsu-bg-lq.jpg
You can also specify a caption for the image using the "[caption=text]" option or specify the width of the image using the "[width=n]" option. The width is specified as a percentage of the article width. Moreover, If the "[top]" option is set, the image is preferentially shown as an eye catcher when you share the URL of the page.
@image https://dbmx.net/harunatsu-bg-lq.jpg [caption=Caption] [width=60] [top]
By default, the size of the image is adjusted to fit the size of the browser window and the type of device. Therefore, it is generally better not to explicitly specify the width.
You can also display multiple images side by side. Simply separate the URLs and options of the images with "|". The sizes of the images will be adjusted appropriately.
@image https://dbmx.net/harunatsu-bg-lq.jpg [caption=Caption1] | https://dbmx.net/harunatsu-bg-lq.jpg [caption=Caption2]
Up to five columns are supported.
Portrait orientation (vertical) images are also adjusted appropriately. They are adjusted to approximately the same area as landscape images, with consideration to prevent the width from becoming too narrow.
Caption
![](https://dbmx.net/harunatsu-bg-lq.jpg)
![](https://dbmx.net/bikibikibob/data/kinjiro.jpg)
Using the "[float=left]" option makes the image float to the left, and the text wraps around it to the right. Captions and width specifications can be used just like other options. The default width is 48. Column specification is not available.
@image https://dbmx.net/harunatsu-bg-lq.jpg [float=left] [caption=Caption] @image https://dbmx.net/bikibikibob/data/kinjiro.jpg [float=left] [width=35]
To clear the wrap, place a horizontal line. It can be from a double dash to a five-fold dash.
--
Caption
![](https://dbmx.net/harunatsu-bg-lq.jpg)
![](https://dbmx.net/bikibikibob/data/kinjiro.jpg)
Similarly, using the "[float=right]" option makes the image float to the right, and the text wraps around it to the left. For both left and right floats, the aspect ratio of the image is not adjusted, nor is the size adjusted according to the type of device.
@image https://dbmx.net/harunatsu-bg-lq.jpg [float=right] [caption=Caption] @image https://dbmx.net/bikibikibob/data/kinjiro.jpg [float=right] [width=35]
It is generally better to use landscape and square images with their default width, or specify a width of about 40 or 35 for vertical images. If the width is too small, it will be difficult to see on a smartphone, so it is safest to keep it at a minimum of around 35. Conversely, if it is too large, the text will be difficult to read, so a maximum of about 50 is the limit.
Headers and tables do not automatically clear the wrap, so they can be wrapped around as well. Only embedding directives for images and videos clear the wrap, apart from horizontal lines. Therefore, to prevent unintended wrapping, it is generally better to place a horizontal line after the content you want to wrap.
![](https://dbmx.net/bikibikibob/data/kinjiro.jpg)
If you want to put images just as decorations but hide them on small screens of smartphones etc., you can use the "[frill]" option. In that case, you should not refer to those images in the text, in cosideration of devices where they are omitted.
@image https://dbmx.net/bikibikibob/data/kinjiro.jpg [float=right] [width=30] [frill] @image https://dbmx.net/harunatsu-bg-lq.jpg [width=40] [frill]
Videos
Just like images, you can specify the URL of the video in the format "@video URL" to embed and display that video within your article. The video can be hosted on your own web server or on an external data management system. As long as a permanent URL can be obtained, any video can be embedded.
@video https://dbmx.net/bikibikibob/data/design-a.mov
The layout rules are exactly the same as for images, and you can specify the width and captions. You can also have up to five columns.
@video https://dbmx.net/bikibikibob/data/design-a.mov [caption=Caption1] | https://dbmx.net/bikibikibob/data/design-a.mov [caption=Caption2]
Caption
Just like with images, you can float videos using the [float=left] or [float=right] options.
@video https://dbmx.net/bikibikibob/data/design-a.mov [float=left] [caption=Caption]
When showcasing many videos, floating can be useful. The play control has a zoom button, so it is not a problem if the display area is somewhat narrow.
If you want to put videos just as decorations but hide them on small screens of smartphones etc., you can use the "[frill]" option. In that case, you should not refer to those videos in the text, in cosideration of devices where they are omitted.
@video https://dbmx.net/bikibikibob/data/design-a.mov [float=right] [width=30] [frill] @video https://dbmx.net/bikibikibob/data/design-a.mov [width=30] [frill]
YouTube
By specifying the URL in the format "@youtube URL", you can embed videos from YouTube. The URL should contain the video ID, such as "?v=xxxxxxxx". You can also specify only "xxxxxxxx" directly.
@youtube https://www.youtube.com/watch?v=Hln6MoTKnUc
The layout rules are exactly the same as for images and videos, and you can specify the width and captions. Up to two columns are supported.
@youtube Hln6MoTKnUc [caption=Caption1] | Hln6MoTKnUc [caption=Caption2]
Caption
You can also float YouTube videos. Just write the [float=left] or [float=right] option.
@youtube Hln6MoTKnUc [float=right] [caption=Caption]
YouTube videos are embedded using iframes, so the aspect ratio of the content cannot be obtained. Therefore, they are implicitly considered slightly wider, and the size is adjusted accordingly. Vertical videos will appear cut off at the top and bottom.
Google Maps
You can also embed Google Maps. Specify the query in the format "@maps query". The query can be a place name like "Tokyo Station" or an address like "1-7-1 Nagatacho, Chiyoda-ku, Tokyo". You can also specify routes like "From Shibuya Station to Tokyo Station". The scale is determined appropriately by default based on the query, but it can be changed with the [zoom=n] option. The value ranges from 1 (wide area) to 21 (detailed).
@maps Tokyo Station
The layout rules are exactly the same as for images and videos, and you can specify the width and captions. Up to two columns are supported.
@maps Tokyo Station [caption=Zoom 8] [zoom=8] | Tokyo Station [caption=Zoom 12] [zoom=12]
Zoom 7
You can also float Maps. Just write the [float=left] or [float=right] option.
@youtube Tokyo Station [float=left] [caption=Zoom 7] [zoom=7]
On smartphones, both YouTube and Maps are displayed in a significantly reduced size, but both have zoom functionality, so this is not an issue.