diff --git a/_includes/responsive-file.html b/_includes/responsive-file.html
new file mode 100644
index 00000000..c69326da
--- /dev/null
+++ b/_includes/responsive-file.html
@@ -0,0 +1,21 @@
+<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' }}">
+        Your browser does not support video.
+      </video>
+    {% elsif include.type == "audio" %}
+      <audio controls>
+        <source src="{{ include.url }}" type="{{ include.format | default: 'audio/mpeg' }}">
+        Your browser does not support audio.
+      </audio>
+    {% elsif include.type == "pdf" %}
+      <iframe src="{{ include.url }}" class="responsive-pdf"></iframe>
+    {% elsif include.type == "image" %}
+      <img src="{{ include.url }}" alt="{{ include.alt | default: 'Uploaded Images' }}" class="responsive-image">
+    {% else %}
+      <div class="file-download">
+        <a href="{{ include.url }}" download>{{ include.filename | default: "Download File" }}</a>
+      </div>
+    {% endif %}
+  </div>
\ No newline at end of file
diff --git a/_includes/youtube.html b/_includes/youtube.html
new file mode 100644
index 00000000..dcc4f1f8
--- /dev/null
+++ b/_includes/youtube.html
@@ -0,0 +1,9 @@
+<!-- _includes/youtube.html -->
+<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
diff --git a/_styles/responsive-files.scss b/_styles/responsive-files.scss
new file mode 100644
index 00000000..c06d30fe
--- /dev/null
+++ b/_styles/responsive-files.scss
@@ -0,0 +1,70 @@
+---
+---
+
+.responsive-file-container {
+    position: relative;
+    width: 100%;
+    max-width: 100%;
+    margin: 1.5rem 0;
+    overflow: hidden;
+  }
+  
+  // Style for Video
+  .responsive-file-container video {
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    height: auto;
+  }
+  
+  // Style for Audio
+  .responsive-file-container audio {
+    display: block;
+    width: 100%;
+    max-width: 100%;
+  }
+  
+  // Style for PDF
+  .responsive-file-container .responsive-pdf {
+    width: 100%;
+    height: 70vh; // ビューポートの高さの70%
+    min-height: 500px;
+    border: none;
+  }
+  
+  // Style for Image
+  .responsive-file-container .responsive-image {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    margin: 0 auto;
+  }
+  
+  // Style for Download Link
+  .responsive-file-container .file-download {
+    padding: 1rem;
+    text-align: center;
+    background: #f5f5f5;
+    border-radius: 4px;
+    
+    a {
+      display: inline-block;
+      padding: 0.5rem 1rem;
+      background: #0066cc;
+      color: white;
+      text-decoration: none;
+      border-radius: 4px;
+      font-weight: bold;
+      
+      &:hover {
+        background: #0052a3;
+      }
+    }
+  }
+  
+  // Mobile Support
+  @media screen and (max-width: 768px) {
+    .responsive-file-container .responsive-pdf {
+      min-height: 300px;
+    }
+  }
\ No newline at end of file
diff --git a/_styles/youtube.scss b/_styles/youtube.scss
new file mode 100644
index 00000000..e6108c86
--- /dev/null
+++ b/_styles/youtube.scss
@@ -0,0 +1,21 @@
+---
+---
+
+.youtube-container {
+    position: relative;
+    width: 100%;
+    max-width: 100%;
+    height: 0;
+    padding-bottom: 56.25%;
+    overflow: hidden;
+    margin: 1.5rem 0; 
+  }
+  
+  .youtube-container iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: none;
+  }
\ No newline at end of file
diff --git a/projects/2025-04-29-momo.md b/projects/2025-04-29-momo.md
index 60309448..3f680eec 100644
--- a/projects/2025-04-29-momo.md
+++ b/projects/2025-04-29-momo.md
@@ -23,7 +23,7 @@ Currently in preparation...
 MoMo (Mobile Module) は，知能化空間内において，サービスを提供するためのデバイスを移動させることを目的としたロボットです．
 空間内のユーザの邪魔にならないように天井面を移動することができ，落下の心配がないという特徴があります．
 
-<iframe src="https://www.youtube.com/embed/MWBXVBr4ojY" width="600" height="400"></iframe>
+{% include youtube.html id="MWBXVBr4ojY" aspect_ratio="75" %}
 
 ## MoMo の機構
 MoMo は安定性や移動速度の向上のために，様々なプロトタイプが開発されてきました．