diff --git a/_includes/responsive-file.html b/_includes/responsive-file.html
index c69326da..ed1a5f97 100644
--- a/_includes/responsive-file.html
+++ b/_includes/responsive-file.html
@@ -1,4 +1,5 @@
-<div class="responsive-file-container">
+<figure class="responsive-file-figure" style="max-width: {{ include.width | default: '100%' }}; margin-left: auto; margin-right: auto;">
+  <div class="responsive-file-container">
     {% if include.type == "video" %}
       <video controls width="100%" preload="metadata">
         <source src="{{ include.url }}" type="{{ include.format | default: 'video/mp4' }}">
@@ -18,4 +19,8 @@
         <a href="{{ include.url }}" download>{{ include.filename | default: "Download File" }}</a>
       </div>
     {% endif %}
-  </div>
\ No newline at end of file
+  </div>
+  {% if include.caption %}
+    <figcaption class="responsive-file-caption">{{ include.caption }}</figcaption>
+  {% endif %}
+</figure>
\ No newline at end of file
diff --git a/_includes/youtube.html b/_includes/youtube.html
index dcc4f1f8..defb5e49 100644
--- a/_includes/youtube.html
+++ b/_includes/youtube.html
@@ -1,9 +1,14 @@
 <!-- _includes/youtube.html -->
-<div class="youtube-container">
+<figure class="responsive-file-figure" style="max-width: {{ include.width | default: '100%' }}; margin-left: auto; margin-right: auto;">
+  <div class="youtube-container">
     <iframe 
       src="https://www.youtube.com/embed/{{ include.id }}" 
       frameborder="0"
       allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
       allowfullscreen>
     </iframe>
-  </div>
\ No newline at end of file
+  </div>
+  {% if include.caption %}
+    <figcaption class="responsive-file-caption">{{ include.caption }}</figcaption>
+  {% endif %}
+</figure>
\ No newline at end of file
diff --git a/_styles/responsive-files.scss b/_styles/responsive-files.scss
index c06d30fe..c75a2294 100644
--- a/_styles/responsive-files.scss
+++ b/_styles/responsive-files.scss
@@ -1,5 +1,27 @@
 ---
 ---
+.responsive-file-figure {
+  width: 100%;
+  margin: 2rem 0;
+  display: block;
+}
+
+// caption style
+.responsive-file-caption {
+  margin-top: 0.75rem;
+  text-align: center;
+  font-size: 0.9rem;
+  color: #555;
+  line-height: 1.4;
+  padding: 0 1rem;
+}
+
+// dark mode
+@media (prefers-color-scheme: dark) {
+  .responsive-file-caption {
+    color: #aaa;
+  }
+}
 
 .responsive-file-container {
     position: relative;