···

       
249
       
249
       
 
       
To embed a video, you use whatever embed tag works. For example, YouTube provides an `<iframe>` tag for

     

       
250
       
250
       
 
       
videos that you can use to embed into the page:

     

       
251
       
251
       
 
       


     

       
252
       
252
       
-
       
<iframe src="https://www.youtube.com/embed/kiWvNwuBbEE" title="Ikenfell Launch Trailer" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

     

       
252
       
252
       
+
       
{{ youtube(id="kiWvNwuBbEE") }}

     

       
253
       
253
       
 
       


     

       
254
       
254
       
 
       
Do not use a `width` or `height` when doing this. The video should always be the full width of the page,

     

       
255
       
255
       
 
       
and the height will be auto-calculated based on a 16:9 aspect ratio.

     

···

       
140
       
140
       
 
       
  margin: 0;

     

       
141
       
141
       
 
       
  color: var(--accent-text);

     

       
142
       
142
       
 
       
}

     

       
143
       
143
       
+
       


     

       
144
       
144
       
+
       
.yt-embed {

     

       
145
       
145
       
+
       
  width: 100%;

     

       
146
       
146
       
+
       
  display: flex;

     

       
147
       
147
       
+
       
  justify-content: center;

     

       
148
       
148
       
+
       
}

     

       
149
       
149
       
+
       


     

       
150
       
150
       
+
       
.yt-embed iframe {

     

       
151
       
151
       
+
       
  width: 100%;

     

       
152
       
152
       
+
       
  aspect-ratio: 16 / 9;

     

       
153
       
153
       
+
       
}

     

···

       
535
       
535
       
 
       
}

     

       
536
       
536
       
 
       


     

       
537
       
537
       
 
       
img,

     

       
538
       
538
       
-
       
video {

     

       
538
       
538
       
+
       
video,

     

       
539
       
539
       
+
       
iframe[src^="https://www.youtube-nocookie.com"],

     

       
540
       
540
       
+
       
iframe[src^="https://www.youtube.com"]

     

       
541
       
541
       
+
       
{

     

       
539
       
542
       
 
       
  max-width: 90%;

     

       
540
       
543
       
 
       
  height: auto;

     

       
541
       
544
       
 
       
  padding: 0.125rem;

     

···

       
1
       
1
       
-
       
<div {% if class %}class="{{class}}"{% endif %}>

     

       
2
       
2
       
-
       
    <iframe

     

       
3
       
3
       
-
       
        src="https://www.youtube-nocookie.com/embed/{{id}}{% if autoplay %}?autoplay=1{% endif %}"

     

       
4
       
4
       
-
       
        allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"

     

       
5
       
5
       
-
       
        webkitallowfullscreen

     

       
6
       
6
       
-
       
        mozallowfullscreen

     

       
7
       
7
       
-
       
        allowfullscreen>

     

       
8
       
8
       
-
       
    </iframe>

     

       
9
       
9
       
-
       
</div>
     

       
1
       
1
       
+
       
<div class="yt-embed">

     

       
2
       
2
       
+
       
  <iframe

     

       
3
       
3
       
+
       
    src="https://www.youtube-nocookie.com/embed/{{id}}{% if autoplay %}?autoplay=1{% endif %}"

     

       
4
       
4
       
+
       
    allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"

     

       
5
       
5
       
+
       
    webkitallowfullscreen

     

       
6
       
6
       
+
       
    mozallowfullscreen

     

       
7
       
7
       
+
       
    allowfullscreen

     

       
8
       
8
       
+
       
  >

     

       
9
       
9
       
+
       
  </iframe>

     

       
10
       
10
       
+
       
</div>