トップページ > 記事閲覧
【質問】you tube 貼り付けについて
投稿日 : 2020/01/05(Sun) 05:42
投稿者 車寅三郎
参照先
今更聞けないくらい基本的な事だとも思うのですが、
たしかおまじないではyou tubeの貼り付けができなくなって、
#html(<iframe></iframe>)で貼り付けているのですが、パソコンで全画面での表示になります。

これを少し小さくしたいと思い、#html(<iframe width="500" height="280" と付け加えて貼り付けるのですが機能しません。
例えば、幅を500pxで貼り付けたい(全画面ではなく)にするにはどうすればいいのでしょうか?
Re: you tube 貼り付けについて
投稿日 : 2020/01/12(Sun) 18:50
投稿者 nakah
参照先
いままでの内容を整理すると以下のようになります。

他の仕事もあり時間の制約内で実験したので、間違いがあったら教えてください。

(1)動画サイズの調整を「調整する」にすると、#html や #html2 を使った動画表示が「全画面表示になり、width と height どおりに表示されない」が、『レスポンシブに対応する』。

(2)動画サイズの調整を「調整しない」にすると、#html や #html2 を使った動画表示が、「全画面表示でなく、width と height どおりに表示される」が、『レスポンシブに対応しない』。

 (2)の場合、<iframe> のコードに、style="max-width:100%;" を追記すれば、幅は全画面幅に保たれるので、『形が崩れるがレスポンシブに対応する』。実験してないが、height: auto; も追記すればさらに良いかもしれない。

(3)動画サイズの調整を「調整する」・「調整しない」のどちらでも、#video を使った動画表示は、「全画面表示になり」、『レスポンシブに対応する』。width と height の変更は、できないようだ。 つまり (1) と、ほぼ同じ。

(4)#cols を使って分割すると、分割した画面内で、上記 (1) 〜 (3) が適応される。

(5)width と height に こだわらなければ、動画サイズの調整を「調整する」にして、レスポンシブ対応にしたほうが良いと思う。
Re: you tube 貼り付けについて
投稿日 : 2020/01/12(Sun) 12:48
投稿者 ミルフィーユ
参照先 https://haik.fujigopc.com/index.php?go=RDgESW
> #video はレスポンシブに対応できますが、width と height の変更ができないのでしょうか?

その場合は、段組み(#cols)併用で良いのではないでしょうか?
Re: you tube 貼り付けについて
投稿日 : 2020/01/12(Sun) 12:35
投稿者 nakah
参照先
動画サイズの調整を「調整しない」にすると、全画面表示でなく、width と height どおりに表示されました。
こんな設定があったことを知りませんでした。

ただ、ミルフィーユさんのサイトページにも書いてありますが、
「調整しない」にすると、#html や #html2 を使った動画表示が、レスポンシブに対応できなくなります。

#video はレスポンシブに対応できますが、width と height の変更ができないのでしょうか?

車寅三郎さん。なんか混乱させているようで、すみません。
Re: you tube 貼り付けについて
投稿日 : 2020/01/12(Sun) 10:26
投稿者 車寅三郎
参照先
ミルフィーユさん、ありがとうございます。

ずーと調整しないにしているものと思い込んでいました。

調整しないにしたところ、できました。

本当に助かりました。ありがとうございました。
Re: you tube 貼り付けについて
投稿日 : 2020/01/12(Sun) 10:04
投稿者 ミルフィーユ
参照先 https://haik.fujigopc.com/index.php?go=RDgESW
車寅三郎さん

今朝の早朝の「動画の表示サイズの設定の件」は、
やってみましたか?
https://haik.fujigopc.com/index.php?go=RDgESW

即ち、動画サイズの調整を「調整しない」に変更しましたか?
Re: you tube 貼り付けについて
投稿日 : 2020/01/12(Sun) 07:02
投稿者 車寅三郎
参照先
nakahさん、ミルフィーユさん、ありがとうございます。

実は、まだうまくいかず、ミルフィーユさんのご紹介のページの一番最後の375pxの表示のhtml2をそのままコピーして見たのですが、
それでも全画面表示になります。一応、いくつかサイトがあり、試したのですが、ダメでした。

これはもう、こちらのサイトの問題なのかもしれません。ミルフィーユさんの画面ではきちんと小さく表示されていますので。
Re: you tube 貼り付けについて
投稿日 : 2020/01/12(Sun) 05:23
投稿者 ミルフィーユ
参照先 https://haik.fujigopc.com/index.php?go=RDgESW
肝心なことを忘れていました。
それは動画の表示サイズの設定の件です。
https://haik.fujigopc.com/index.php?go=RDgESW
Re: you tube 貼り付けについて
投稿日 : 2020/01/11(Sat) 06:22
投稿者 ミルフィーユ
参照先 https://haik.fujigopc.com/index.php?go=QC1Nf8
Youtube動画の縮小に苦労されているみたいですが、参考ページを紹介します。
https://haik.fujigopc.com/index.php?go=QC1Nf8

該当ページの最下段に段組みを使用せず、望みのサイズに縮小している様が見て取れる思います。
参考までに!!
Re: you tube 貼り付けについて
投稿日 : 2020/01/10(Fri) 15:45
投稿者 nakah
参照先
やはり HAIK で、簡単に YouTubeなどの動画を全画面でなく表示するには、#cols を使う方がいいみたいです。
今回は #html{{ }}を囲むので、#cols{{{ }}} で囲むと思います。

全画面の半分にする場合は、12が全画面なので、#cols(6) です。
他のテキスト・画像・動画などと並べる場合は、#cols( , ) の ( , ) 内の数値を合計12内に調整して , で区切り、各コンテンツを ==== で区切ります。

01/05(Sun) に「私は以下のコードで、うまく表示できてます。」と書いたのは、#cols を使っていました。
そのコードのままだと全画面で表示されてしまいます。訂正しておきました。

width="500" height="280" のアスペクト比でも、問題ないようです。

#cols を使わない場合は、CSS にスタイルを書き込んで、<div class=" "> などで <iframe … ></iframe> を囲む方法もありますが、面倒なことになりそうなので、まだ試してません。以下は参考リンクです。

https://beadored.com/movie-embed-responsive-css/

https://nelog.jp/wordpress-iframe-responsiv

みなさん、他に良い方法はありますか?
Re: you tube 貼り付けについて
投稿日 : 2020/01/10(Fri) 06:12
投稿者 車寅三郎
参照先
nakahさん、ありがとうございました。

まだ全画面になるのですが、今週末できちんともう一度やってみようと思います。ありがとうございました。

あと、#colsも私もやってみて、応用できれば良いなと思います。

昔の表の方で入れると、確か表の大きさで調整できた気がします。それもやってみます。
Re: you tube 貼り付けについて
投稿日 : 2020/01/09(Thu) 09:57
投稿者 nakah
参照先
YouTube の「共有」→「埋め込む」で最初に出てくるコードは以下です。
もし下のように、width="560" height="315" にするとOKなら、width="500" height="280" のアスペクト比じゃダメなのかも?

<iframe width="560" height="315" src="https://www.youtube.com/embed/fEvM-OUbaKs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

「埋め込みオプション」の違いでコードは変わると思います。
埋め込みオプションの下にある「API リファレンス」と「 デベロッパー サンプル」のリンクにも詳しい説明があると思います。

HAIKの #cols を使って並べたらどうなるか?
Re: you tube 貼り付けについて
投稿日 : 2020/01/08(Wed) 11:42
投稿者 車寅三郎
参照先
試してみたのですが、ダメでした。やはり全画面表示になってしまいます。

済みません。例えば このyoutubeを貼り付けた場合の

横幅500における記述を全体でお願いできませんでしょうか?

https://www.youtube.com/watch?v=fEvM-OUbaKs
Re: you tube 貼り付けについて
投稿日 : 2020/01/06(Mon) 11:57
投稿者 車寅三郎
参照先
ありがとうございます!
試してみます!
Re: you tube 貼り付けについて
投稿日 : 2020/01/05(Sun) 06:49
投稿者 nakah
参照先
私は以下のコードで、うまく表示できてます。

#html{{
<iframe style="max-width:100%;" width="500" height="280" ・・・></iframe>
}}

(01/10 追記)やはり #cols などを使わないと、全画面で表示されてしまいます。

- WEB PATIO -