ADP Wiki:Style Guide: Difference between revisions
mNo edit summary Tag: Reverted |
mNo edit summary Tag: Manual revert |
||
| Line 30: | Line 30: | ||
<syntaxhighlight lang="WikiText"> | <syntaxhighlight lang="WikiText"> | ||
<div class="video-responsive"> | <div class="wiki-video-responsive"> | ||
{{#widget:YouTube|id=akGGOHwoyL0}} | {{#widget:YouTube|id=akGGOHwoyL0}} | ||
</div> | </div> | ||
| Line 37: | Line 37: | ||
...outputs... | ...outputs... | ||
<div class="video-responsive"> | <div class="wiki-video-responsive"> | ||
{{#widget:YouTube|id=akGGOHwoyL0}} | {{#widget:YouTube|id=akGGOHwoyL0}} | ||
</div> | </div> | ||
Revision as of 16:17, 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.
Similarly, we can display them at 360px wide to match the dimensions when inserting images with the code above.
{{#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 website's body text container, on desktop AND on mobile.
<div class="wiki-video-responsive">
{{#widget:YouTube|id=akGGOHwoyL0}}
</div>
...outputs...