Update height of embedded iframe

yunseo-kim · yunseo-kim · commit ee0fd9323a84 · 2024-12-07T22:12:47.000+09:00
diff --git a/_posts/de/2024-12-03-analytic-solution-of-the-harmonic-oscillator.md b/_posts/de/2024-12-03-analytic-solution-of-the-harmonic-oscillator.md
@@ -220,22 +220,13 @@ Je größer $n$ wird, desto ähnlicher wird der Quantenoszillator dem klassische
 ### Interaktive Visualisierung der Wahrscheinlichkeitsverteilungen des Quantenoszillators
 Das Folgende ist eine reaktive Visualisierung basierend auf Plotly.js, die ich selbst erstellt habe. Sie können den $n$-Wert mit dem Schieberegler anpassen und die klassische Wahrscheinlichkeitsverteilung sowie die Form von $\|\psi_n\|^2$ für die Position $x$ überprüfen.
 
-<div class="responsive-iframe-container" style="position: relative; padding-bottom: 100%; overflow: hidden;">
-    <iframe id="responsive-iframe"
+<div class="plotly-iframe-container" style="position: relative; padding-bottom: 100%; overflow: hidden;">
+    <iframe id="plotly-iframe"
             src="/physics-visualization/quantum-harmonic-oscillator.html" 
-            style="position: absolute; top: 0; left: 0; width: 100%; border: none;" 
+            style="position: absolute; top: 0; left: 0; width: 100%; height: 120%; border: none;" 
             allow="fullscreen">
     </iframe>
 </div>
-<script>
-  document.getElementById('responsive-iframe').addEventListener('load', function() {
-    var iframe = this;
-    var iframeDocument = iframe.contentWindow.document;
-    // Get the scrollHeight of the iframe's document
-    var height = iframeDocument.documentElement.scrollHeight || iframeDocument.body.scrollHeight;
-    iframe.style.height = height + 'px';
-  });
-</script>
 
 > - Originalvisualisierung: <{{site.url}}/physics-visualization/quantum-harmonic-oscillator>
 > - Quellcode: [yunseo-kim/physics-visualization Repository](https://github.com/yunseo-kim/physics-visualization/blob/main/src/quantum-harmonic-oscillator.html)
diff --git a/_posts/en/2024-12-03-analytic-solution-of-the-harmonic-oscillator.md b/_posts/en/2024-12-03-analytic-solution-of-the-harmonic-oscillator.md
@@ -218,22 +218,13 @@ As $n$ increases, the quantum oscillator becomes more similar to a classical osc
 ### Interactive Visualization of Quantum Oscillator Probability Distributions
 The following is a responsive visualization based on Plotly.js that I created myself. You can adjust the $n$ value using the slider to check the classical probability distribution and the shape of $\|\psi_n\|^2$ with respect to position $x$.
 
-<div class="responsive-iframe-container" style="position: relative; padding-bottom: 100%; overflow: hidden;">
-    <iframe id="responsive-iframe"
+<div class="plotly-iframe-container" style="position: relative; padding-bottom: 100%; overflow: hidden;">
+    <iframe id="plotly-iframe"
             src="/physics-visualization/quantum-harmonic-oscillator.html" 
-            style="position: absolute; top: 0; left: 0; width: 100%; border: none;" 
+            style="position: absolute; top: 0; left: 0; width: 100%; height: 120%; border: none;" 
             allow="fullscreen">
     </iframe>
 </div>
-<script>
-  document.getElementById('responsive-iframe').addEventListener('load', function() {
-    var iframe = this;
-    var iframeDocument = iframe.contentWindow.document;
-    // Get the scrollHeight of the iframe's document
-    var height = iframeDocument.documentElement.scrollHeight || iframeDocument.body.scrollHeight;
-    iframe.style.height = height + 'px';
-  });
-</script>
 
 > - Original visualization page: <{{site.url}}/physics-visualization/quantum-harmonic-oscillator>
 > - Source code: [yunseo-kim/physics-visualization repository](https://github.com/yunseo-kim/physics-visualization/blob/main/src/quantum-harmonic-oscillator.html)
diff --git a/_posts/es/2024-12-03-analytic-solution-of-the-harmonic-oscillator.md b/_posts/es/2024-12-03-analytic-solution-of-the-harmonic-oscillator.md
@@ -218,22 +218,13 @@ A medida que $n$ aumenta, el oscilador cuántico se asemeja más al oscilador cl
 ### Visualización interactiva de las distribuciones de probabilidad del oscilador cuántico
 La siguiente es una visualización reactiva basada en Plotly.js que he creado personalmente. Puedes ajustar el valor de $n$ con el deslizador para ver la forma de la distribución de probabilidad clásica y $\|\psi_n\|^2$ en función de la posición $x$.
 
-<div class="responsive-iframe-container" style="position: relative; padding-bottom: 100%; overflow: hidden;">
-    <iframe id="responsive-iframe"
+<div class="plotly-iframe-container" style="position: relative; padding-bottom: 100%; overflow: hidden;">
+    <iframe id="plotly-iframe"
             src="/physics-visualization/quantum-harmonic-oscillator.html" 
-            style="position: absolute; top: 0; left: 0; width: 100%; border: none;" 
+            style="position: absolute; top: 0; left: 0; width: 100%; height: 120%; border: none;" 
             allow="fullscreen">
     </iframe>
 </div>
-<script>
-  document.getElementById('responsive-iframe').addEventListener('load', function() {
-    var iframe = this;
-    var iframeDocument = iframe.contentWindow.document;
-    // Get the scrollHeight of the iframe's document
-    var height = iframeDocument.documentElement.scrollHeight || iframeDocument.body.scrollHeight;
-    iframe.style.height = height + 'px';
-  });
-</script>
 
 > - Visualización original: <{{site.url}}/physics-visualization/quantum-harmonic-oscillator>
 > - Código fuente: [Repositorio yunseo-kim/physics-visualization](https://github.com/yunseo-kim/physics-visualization/blob/main/src/quantum-harmonic-oscillator.html)
diff --git a/_posts/fr/2024-12-03-analytic-solution-of-the-harmonic-oscillator.md b/_posts/fr/2024-12-03-analytic-solution-of-the-harmonic-oscillator.md
@@ -218,22 +218,13 @@ Plus $n$ est grand, plus l'oscillateur quantique ressemble à un oscillateur cla
 ### Visualisation interactive des distributions de probabilité de l'oscillateur quantique
 Voici une visualisation réactive basée sur Plotly.js que j'ai créée moi-même. Vous pouvez ajuster la valeur de $n$ avec le curseur pour voir la forme de la distribution de probabilité classique et de $\|\psi_n\|^2$ en fonction de la position $x$.
 
-<div class="responsive-iframe-container" style="position: relative; padding-bottom: 100%; overflow: hidden;">
-    <iframe id="responsive-iframe"
+<div class="plotly-iframe-container" style="position: relative; padding-bottom: 100%; overflow: hidden;">
+    <iframe id="plotly-iframe"
             src="/physics-visualization/quantum-harmonic-oscillator.html" 
-            style="position: absolute; top: 0; left: 0; width: 100%; border: none;" 
+            style="position: absolute; top: 0; left: 0; width: 100%; height: 120%; border: none;" 
             allow="fullscreen">
     </iframe>
 </div>
-<script>
-  document.getElementById('responsive-iframe').addEventListener('load', function() {
-    var iframe = this;
-    var iframeDocument = iframe.contentWindow.document;
-    // Get the scrollHeight of the iframe's document
-    var height = iframeDocument.documentElement.scrollHeight || iframeDocument.body.scrollHeight;
-    iframe.style.height = height + 'px';
-  });
-</script>
 
 > - Page de visualisation originale : <{{site.url}}/physics-visualization/quantum-harmonic-oscillator>
 > - Code source : [Dépôt yunseo-kim/physics-visualization](https://github.com/yunseo-kim/physics-visualization/blob/main/src/quantum-harmonic-oscillator.html)
diff --git a/_posts/ja/2024-12-03-analytic-solution-of-the-harmonic-oscillator.md b/_posts/ja/2024-12-03-analytic-solution-of-the-harmonic-oscillator.md
@@ -224,22 +224,13 @@ $n$が大きくなるほど、量子振動子は古典的振動子に類似し
 ### 量子振動子の確率分布のインタラクティブな可視化
 以下は私が直接作成したPlotly.jsベースのレスポンシブな可視化です。スライダーで$n$値を調整しながら、位置$x$に対する古典的な確率分布および$\|\psi_n\|^2$の概形を確認できます。
 
-<div class="responsive-iframe-container" style="position: relative; padding-bottom: 100%; overflow: hidden;">
-    <iframe id="responsive-iframe"
+<div class="plotly-iframe-container" style="position: relative; padding-bottom: 100%; overflow: hidden;">
+    <iframe id="plotly-iframe"
             src="/physics-visualization/quantum-harmonic-oscillator.html" 
-            style="position: absolute; top: 0; left: 0; width: 100%; border: none;" 
+            style="position: absolute; top: 0; left: 0; width: 100%; height: 120%; border: none;" 
             allow="fullscreen">
     </iframe>
 </div>
-<script>
-  document.getElementById('responsive-iframe').addEventListener('load', function() {
-    var iframe = this;
-    var iframeDocument = iframe.contentWindow.document;
-    // Get the scrollHeight of the iframe's document
-    var height = iframeDocument.documentElement.scrollHeight || iframeDocument.body.scrollHeight;
-    iframe.style.height = height + 'px';
-  });
-</script>
 
 > - オリジナルの可視化ページ：<{{site.url}}/physics-visualization/quantum-harmonic-oscillator>
 > - ソースコード：[yunseo-kim/physics-visualization リポジトリ](https://github.com/yunseo-kim/physics-visualization/blob/main/src/quantum-harmonic-oscillator.html)
diff --git a/_posts/ko/2024-12-03-analytic-solution-of-the-harmonic-oscillator.md b/_posts/ko/2024-12-03-analytic-solution-of-the-harmonic-oscillator.md
@@ -224,22 +224,13 @@ $n$이 클수록 양자진동자는 고전적 진동자와 유사한 양상을 
 ### Interactive Visualization of Quantum Oscillator Probability Distributions
 다음은 내가 직접 작성한 Plotly.js 기반의 반응형 시각화이다. 슬라이더로 $n$값을 조절해 가며 위치 $x$에 대한 고전적인 확률분포 및 $\|\psi_n\|^2$의 개형을 확인할 수 있다.
 
-<div class="responsive-iframe-container" style="position: relative; padding-bottom: 100%; overflow: hidden;">
-    <iframe id="responsive-iframe"
+<div class="plotly-iframe-container" style="position: relative; padding-bottom: 100%; overflow: hidden;">
+    <iframe id="plotly-iframe"
             src="/physics-visualization/quantum-harmonic-oscillator.html" 
-            style="position: absolute; top: 0; left: 0; width: 100%; border: none;" 
+            style="position: absolute; top: 0; left: 0; width: 100%; height: 120%; border: none;" 
             allow="fullscreen">
     </iframe>
 </div>
-<script>
-  document.getElementById('responsive-iframe').addEventListener('load', function() {
-    var iframe = this;
-    var iframeDocument = iframe.contentWindow.document;
-    // Get the scrollHeight of the iframe's document
-    var height = iframeDocument.documentElement.scrollHeight || iframeDocument.body.scrollHeight;
-    iframe.style.height = height + 'px';
-  });
-</script>
 
 > - 원본 시각화 페이지: <{{site.url}}/physics-visualization/quantum-harmonic-oscillator>
 > - 소스코드: [yunseo-kim/physics-visualization 리포지터리](https://github.com/yunseo-kim/physics-visualization/blob/main/src/quantum-harmonic-oscillator.html)
diff --git a/_posts/pt-BR/2024-12-03-analytic-solution-of-the-harmonic-oscillator.md b/_posts/pt-BR/2024-12-03-analytic-solution-of-the-harmonic-oscillator.md
@@ -218,22 +218,13 @@ Quanto maior o $n$, mais o oscilador quântico se assemelha ao oscilador clássi
 ### Visualização Interativa das Distribuições de Probabilidade do Oscilador Quântico
 A seguir está uma visualização responsiva baseada em Plotly.js que eu mesmo criei. Você pode ajustar o valor de $n$ usando o controle deslizante para verificar a forma da distribuição de probabilidade clássica e $\|\psi_n\|^2$ em relação à posição $x$.
 
-<div class="responsive-iframe-container" style="position: relative; padding-bottom: 100%; overflow: hidden;">
-    <iframe id="responsive-iframe"
+<div class="plotly-iframe-container" style="position: relative; padding-bottom: 100%; overflow: hidden;">
+    <iframe id="plotly-iframe"
             src="/physics-visualization/quantum-harmonic-oscillator.html" 
-            style="position: absolute; top: 0; left: 0; width: 100%; border: none;" 
+            style="position: absolute; top: 0; left: 0; width: 100%; height: 120%; border: none;" 
             allow="fullscreen">
     </iframe>
 </div>
-<script>
-  document.getElementById('responsive-iframe').addEventListener('load', function() {
-    var iframe = this;
-    var iframeDocument = iframe.contentWindow.document;
-    // Get the scrollHeight of the iframe's document
-    var height = iframeDocument.documentElement.scrollHeight || iframeDocument.body.scrollHeight;
-    iframe.style.height = height + 'px';
-  });
-</script>
 
 > - Página de visualização original: <{{site.url}}/physics-visualization/quantum-harmonic-oscillator>
 > - Código fonte: [Repositório yunseo-kim/physics-visualization](https://github.com/yunseo-kim/physics-visualization/blob/main/src/quantum-harmonic-oscillator.html)
