ADP Wiki:Style Guide: Difference between revisions
mNo edit summary Tag: Manual revert |
mNo edit summary |
||
| Line 15: | Line 15: | ||
This is done using the installed YouTube widget. Grab the video's code from its YouTube URL. | This is done using the installed YouTube widget. Grab the video's code from its YouTube URL. | ||
Similar to images, we can display videos at 360px wide for a coherent look: | |||
<syntaxhighlight lang="WikiText"> | <syntaxhighlight lang="WikiText"> | ||
| Line 27: | Line 27: | ||
=== Making YouTube video embeds more responsive === | === Making YouTube video embeds more responsive === | ||
If we want YouTube video embeds to span the full width of the | If we want YouTube video embeds to span the full width of the site's body text container (with a hard limit to stop it getting ridiculous on wide desktop displays), we can use this code instead: | ||
<syntaxhighlight lang="WikiText"> | <syntaxhighlight lang="WikiText"> | ||
Revision as of 16:31, 7 November 2026
Adding Images
Individual images look good when rendered at 360px wide.
[[File:VolumeI-Cover.jpg|360px]] [[File:VolumeI-Vinyl-Dice-Sardines-Sleeve.jpg|360px]]
...outputs...
Adding YouTube videos
This is done using the installed YouTube widget. Grab the video's code from its YouTube URL.
Similar to images, we can display videos at 360px wide for a coherent look:
{{#widget:YouTube|id=akGGOHwoyL0|width=360|height=203}}
...outputs...
Making YouTube video embeds more responsive
If we want YouTube video embeds to span the full width of the site's body text container (with a hard limit to stop it getting ridiculous on wide desktop displays), we can use this code instead:
<div class="wiki-video-responsive">
{{#widget:YouTube|id=akGGOHwoyL0}}
</div>
...outputs...