From 05efc1489db9a033d027178229b54ba26e2988b9 Mon Sep 17 00:00:00 2001
From: momo_pc <shimizu.aislab@gmail.com>
Date: Mon, 5 May 2025 18:40:05 +0900
Subject: [PATCH] add video posting and size change

---
 _includes/responsive-file.html | 21 ++++++++++
 _includes/youtube.html         |  9 +++++
 _styles/responsive-files.scss  | 70 ++++++++++++++++++++++++++++++++++
 _styles/youtube.scss           | 21 ++++++++++
 projects/2025-04-29-momo.md    |  2 +-
 5 files changed, 122 insertions(+), 1 deletion(-)
 create mode 100644 _includes/responsive-file.html
 create mode 100644 _includes/youtube.html
 create mode 100644 _styles/responsive-files.scss
 create mode 100644 _styles/youtube.scss

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