ADP Wiki:Style Guide: Difference between revisions
No edit summary |
No edit summary |
||
| Line 24: | Line 24: | ||
{{#widget:YouTube|id=akGGOHwoyL0|width=360|height=203}} | {{#widget:YouTube|id=akGGOHwoyL0|width=360|height=203}} | ||
=== 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. | |||
<syntaxhighlight lang="WikiText"> | |||
<div class="wiki-video-responsive"> | |||
{{#widget:YouTube|id=akGGOHwoyL0}} | |||
</div> | |||
</syntaxhighlight> | |||
...outputs... | |||
<div class="wiki-video-responsive"> | |||
{{#widget:YouTube|id=akGGOHwoyL0}} | |||
</div> | |||
Revision as of 16:14, 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...