トップページ > 記事閲覧
【質問】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 などを使わないと、全画面で表示されてしまいます。