トップページ > 記事閲覧
【質問】Youtubeの貼り付け〜スマホ向け
投稿日 : 2020/06/11(Thu) 16:29
投稿者 よしたん
参照先 http://lugz-and-jera.net
私はパソコンでHPの編集をやっています。
Youtubeについてその確認をPCで見た場合と
スマホで見た場合では見え方が違うのは当然ですが
私がやっているサイトをスマホで見ると
Youtubeの画面が全体を表示していないことを最近知りました。
(私はスマホは使用していません)
(編集の時にスマホのプレビュー表示機能は使っていませんでした)

Youtubeの貼り付けについてですが
各種スマホで全体表示出来る共通の”おまじない”を教えていただきたいのです。

”おまじない”の中で横と縦のサイズを変更すれば良いのは分っていますが
出来れば今まで貼り付けた”おまじない”は変更したくないので
今までのも含めて一括して全体表示出来るような方法があれば嬉しいのですが。。。

ちなみに今、使っているおまじないは下記の通りです。

#html{{
<p><div class="plugin"><br />
<iframe width="600" height="300"src="http://www.youtube.com/embed/m9ymo_3AO94" frameborder="0" allowfullscreen></iframe></div></P>
}}
Re: 【質問】Youtubeの貼り付け〜スマホ向け
投稿日 : 2020/06/12(Fri) 14:25
投稿者 よしたん
参照先 http://lugz-and-jera.net
現在は、うみほしさんから教えていただいた
「100%」を使うやり方を採用しています。
Re: 【質問】Youtubeの貼り付け〜スマホ向け
投稿日 : 2020/06/12(Fri) 14:21
投稿者 よしたん
参照先 http://lugz-and-jera.net
tomzoさん、ありがとうございます。

試してみました。

うみほしさんからのアドバイスと
tomzoさんのアドバイスを両方やって比較しました。

添付画像がその結果をキャプチャーしたものです。

上がtomzoさんからのものです。
下がうみほしさんからのものです。


実は、見え方が微妙に違うのがお分かり頂けるでしょうか。

※映像サイズ全体が大きいのは上です。
しかしながら、上は、一時停止と再生の操作しかできません。
一方の下は好きな再生位置まで自由に移動させることが出来るのと、音量操作もできます。(上は音量操作ができません)

このあたりは、好みによって変わってくるのかなという感じですね。

tomzoさん、ありがとうございました!!

Re: 【質問】Youtubeの貼り付け〜スマホ向け
投稿日 : 2020/06/12(Fri) 14:02
投稿者 よしたん
参照先 http://lugz-and-jera.net
うみほしさん、ありがとうございます。

⇒ width="600"の数字を100%というように指定する・・・

これをやってみたら、
たしかに横全体がフィットして表示されるようになりますね。
Re: 【質問】Youtubeの貼り付け〜スマホ向け
投稿日 : 2020/06/12(Fri) 13:03
投稿者 tomzo
参照先
よしたん さん

こんにちは tomzoです。

私は、YouTubeの動画は、以下のようにしています。
スマホ、パソコンとも問題なく表示しています。

動画のサイズが 16:9 のとき
#video(https://youtu.be/xxxxx,xxx.jpg,ytpreview=medium)

動画のサイズが 4:3 のとき
#video(https://youtu.be/xxxxx,xxx.jpg,4:3)
Re: 【質問】Youtubeの貼り付け〜スマホ向け
投稿日 : 2020/06/11(Thu) 20:16
投稿者 うみほし
参照先
width="600"の数字を100%というように指定するというのも聞いたことがあります。
Re: 【質問】Youtubeの貼り付け〜スマホ向け
投稿日 : 2020/06/11(Thu) 19:59
投稿者 よしたん
参照先 http://lugz-and-jera.net
うみほしさん、いつもありがとうございます。

さっそく、このプラグインを使ってやってみました。
結果ですが、残念ながら無効でした。

その部分は真っ白になりますね。。。

参照ページ⇒ https://manual.haik-cms.jp/index.php?video
Re: 【質問】Youtubeの貼り付け〜スマホ向け
投稿日 : 2020/06/11(Thu) 17:29
投稿者 うみほし
参照先
やったことはないですが,HAIKのプラグインを使うと,
#video(動画ファイル名 or URL,オプション)
でYouTubeのアドレスをURLのところに入れると表示できると簡易マニュアルにあります。この方法だとレスポンシブルになるのではないでしょうか。
オプション等は簡易マニュアルを参照してください。

- WEB PATIO -