| 記事No | ： 16498 |
| 投稿日 | ： 2021/05/07(Fri) 03:09:19 |
| タイトル | ： Topic Boardで1つの記事内に複数のYoutubeを |
| ID情報 | ： inatw |
| 投稿者 | ： inatw |
| URL | ： http://210.60.91.2/cgi-bin/topics/topics.cgi |
Topic Board 5.1を使用しています。
Topic Boardで1つの記事内に複数のYoutubeを貼り付けたいのですが、なかなかうまくいきません。
方法1：
投稿画面の「本文」の部分に複数のYoutubeタグを書く。
結果：
パソコンのブラウザ（Edge、Chrome）では、うまく収まって複数表示される。
スマホのブラウザ（Android、Chrome）では、複数表示されるが、枠をはみ出てしまう。
＝改版情報にある「スマホ画面モードのときに枠外になる」
方法2
投稿画面の「Youtubeタグ」の部分に複数のYoutubeタグを書く。
結果：
パソコンのブラウザ（Edge、Chrome）では、うまく収まって複数表示される。
スマホのブラウザ（Android、Chrome）では、複数表示されず、最後の1つだけが枠内に表示される。
1つの記事内に複数のYoutubeを貼り付けて、パソコンでもスマホでも複数表示されて、枠内に収まる方法がありましたら、ご教示ください。
| 記事No | ： 16499 |
| 投稿日 | ： 2021/05/07(Fri) 11:38:56 |
| タイトル | ： 自己解決しました |
| ID情報 | ： inatw |
| 投稿者 | ： inatw |
すみません、自己解決しました。
cmn/style.css
に
/* Youtube対応 */
.youtube {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
とあるので、
方法1の「本文」に複数のYoutubeを貼り付ける際に、Youtubeタグを以下の<div>で括りました。
<div class="youtube">
</div>
例
<div class="youtube">
<iframe width="560" height="315" src="https://www.youtube.com/embed/xxxxxx" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
これを複数（YoutubeのURLを変えたもの）「本文」に貼り付けると、
パソコンでもスマホでも、枠内に収まって、複数表示されました。
今後は、
・Youtubeが一つだけの場合は、投稿画面の「Youtubeタグ」に一つだけ貼り付ける。
・Youtubeが複数の場合は、投稿画面の「本文」に<div class="youtube"></div>で括ったYoutubeタグを複数貼り付ける。
以上で対応していきます。