add video posting and size change

_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>

_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>

_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;
+    }
+  }

_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;
+  }

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 は安定性や移動速度の向上のために，様々なプロトタイプが開発されてきました．