YouTube動画をポップアップで再生するテスト
幾つか試しに動画を貼り付けてみた。
画像をクリックすると、ポップアップで動画再生が始まるはず。

動画再生中でもページをスクロール出来るが、ポップアップは固定されて移動しない。
スクロールして、他の画像をクリックすると動画が入れ替わって再生されると思う。

一番下の画像がデフォルトで、YouTubeの埋め込みコードをそのまま貼り付けたもの。
埋め込みコードを元にサムネイルが自動で表示され、クリックするとポップアップ再生する。

ブラウザのサイズを変えると、ポップアップの大きさも変化する。
ただし、再生中にはサイズが追従しない。
もう一度、サムネイルをクリックすれば新たなサイズに変わるはずなのだが・・・

追記：2015/12/23　10:00 ーーーーーーーーーー

閉じるボタンをクリックした時に枠線が見えたので、対策を考えた。
IEで気付かなかったが、Firefoxとクロムで見たら枠線が出ていた。
とりあえず、outline:none; で見えなくなったが・・・
なんとも、あたり前の事だったような気がしてつまらない。


次は


その次は


そのその次は


そのそのその次は


そのそのそのその次は


これでもう良いかな

テスト終了

追記：
この動画は僕じゃないが・・・


これで、ほんとうに終わり。

今日、徒労に終わったのは、部屋の模様替えだけではなかった。
部屋の模様替えは、http://yuz1.blog.shinobi.jp/Entry/1863/ に書いてある。

今朝、朝ごはんを食べ終えて食後の休憩で、プログラムを作っていた。
それはYouTube動画をサムネイル表示にして、ポップアップで再生するものである。
ところが、どうも上手く動作しない。
まぁ、プログラミングでは良くある事で、考え違いとかウッカリしたミスとか。

これも散々な目にあって、頭の中の脳ミソが痒くなるような感覚になった。
おかしい、おかしい・・・

そして夕方、部屋の模様替えに失敗した僕はグッタリしてパソコンの前にいる。
もう一度気を取り直して、さて始めるかと仕切り直しでプログラムコードを眺めてみた。

見つけたよ、問題の箇所を。
コロンとセミコロンがね、間違って使われていた。
キーボード配列では二つのキーが隣り合わせなので、たまに間違う事がある。
カンマとピリオドもやはり同様に隣り合って、打ち間違いする。
ただ、そのような事は承知しているので、まず一番に打ち間違いをチェックしている。

だが、今朝は打ち間違いに気が付かず、訳が分からなくなっていた。

理由は簡単な事であった。
パソコンの液晶画面にドット欠けがあって、コロンがセミコロンに見えていたようだ。
白い背景に黒文字、灰色のような黒や茶色でコードが表示されている。
しかもコードは半角文字なので、小さくて見間違いやすい。
そこに、ドット欠けが重なって判別を誤ったようだ。

まいった、まいった！

おわり。

先日の動画のサムネイルの事で、ポップアップに新たなウインドウを作るのは疑問があった。
そこで、今日はチョッと方向転換してBlockElementで試してみた。
今日は朝から曇り空で寒くて、家の中の片付けをやる気にならなかったから。

いちおう、どこかで見たような雰囲気の・・・
それはまぁ、左上の閉じるボタンは画像をパクったし、周囲のbox-shadow設定も同じだし。



見てのとおり、YouTubeのサムネイルがある。
そのサムネイルをクリックすると、ポップアップで動画再生が始まる。
もちろんサムネイルは自動で作られるので、サムネイル画像のURIを書く必要はない。
これは、このブログに実装しておいた機能そのものである。

さて、これから先をどうするかである。
この動画ポップアップを、画面スクロールに連動させるかどうか。
とりあえず、モーダルにするつもりではあるが・・・

とかなんとか考えているうちに、夜がふけた。
そんな事よりも、閉じるボタンでポップアップが消えるようにしなければなぁ。
どうも、途中でいろいろな考えが出てきて惑わされてしまう。
ーーーーーーーーーー

そもそも僕はポップアップで動画再生する事は、まったく考えていなかった。
たまたま話題に出たので、なるほどと思って試してみたのだ。

僕がこのブログに実装してあるYoutubeのサムネイル変換は、たくさんの動画を貼り付けた際に重くなるのを防ぐ目的であった。
サムネイルを自分でアップして動画をリンクすれば良いのだが、それは面倒な事だ。
そこで、普通にYouTubeの貼り付けコードを記事に貼り付ければ自動でサムネイルが表示されるようにした。
自動で表示されたサムネイルは動画リンクが付いて、サムネイルと同じサイズで動画を再生する。
サイズが同じなのでレイアウトに変化がなく、まぁまぁ満足はしている。
ただし、やはり大きなサイズで見た方が動画は見やすいと思う。
するとポップアップでサイズアップする方法は、一つの手段であると納得するものである。
ーーーーーーーーーー

ふと、初めの考えを書いていて思った事がある。
たくさんの動画で重くなる事を防ぐと言うが、実のところ僕はそれほど動画を貼り付けていない。
う～ん、これが僕の性分なのだろう。
起こりもしないような事に備えて、あれこれと考える。
たしかに、そのような事が起これば備えがあって良かったと思うのだろうが・・・

でも、それは必ずしもムダにはならないと思う。
このブログは「ぷらら」から移転したのだが、早い時期にバックアップ移転プログラムを作った。
そのおかげで、元のブログと寸分違わぬ状態で再現が出来た。
もしあの時に何の考えもなしに過ごしていたら、このブログは無かっただろう。

しかし、こうして書いているといくらでも膨らんでくる。
たいがい、後で読み返すと笑ってしまう話なのだが・・・

先日は引っ越しやら忙しかったが、今は少し時間が出来たので考えてみる。

＊ ブラウザのサイズを取得する
＊ 動画のサイズを取得する
＊ ブラウザと動画のサイズから、ポップアップ用新規ウインドウのサイズを計算する
＊ ポップアップ用新規ウインドウをサイズ指定で開く
＊ 新規ウインドウに動画プレーヤーを表示する

ここまでが、基本的な仕組みかなぁ。

事前の準備として、記事に埋め込んだ動画コードからサムネイルURIを生成しておく。
同時に、動画再生の設定をした埋め込みコードを生成する。
この二つは現在このブログに実装したコードで実現しているので、手間はかからない・・・

新たにする事は、初めに挙げた基本の五つをプログラムすれば良いと思うのだが。
あとは見栄えと操作面の事を考えれば、なんとか出来そうな？
ーーーーーーーーーー

進捗の状況：

12/17　05:30
どうしようかなぁ、重複する部分は現用のFunction引用を利用するか、新たに作るか。
いろいろ考えもあるが、とりあえず一から作る事にしよう。

ブラウザのサイズは、document.body.clientHeight　(Width)　で試そうか。
あれ、高さがブラウザじゃなくてbodyそのものなのか、こりゃダメだ・・・
では、document.documentElement.clientHeight　(Width)　なんか長ったらしいが。
これは上手くサイズが取れた、スクロールバー部分を除いたサイズだな。




あれれっ、IEやクロムは新しいウインドウが開くけど、Firefoxは新しいタブが出来ちゃったよ。
まだ空のウインドウを開くだけでサイズ計算はしていないが、今朝はここまでにしよう。

12/17　11:00
これから病院へ出かけるが、忘れないうちに書いておく。
なんとなく、新たなウインドウを開いて使うのは良くない気がする。
他の方法を探る事にする。

ホームページ、ブログなどを自作していると、それぞれでコメント書式が異なり混乱する事がある。
HTML、CSS、Java、JavaScript、Perl、ApachなどいろいろWeb関係でゴチャゴチャする。
まぁ、それなりのエディタを使えば色分けで分かるのだが・・・

記事にチョッとだけ引用しようとすると、間違える事がある。
昨日もウッカリしていたようで、さっき気付いたという。

CSSのスタイル、これも僕は間違えやすい。
あまり使う事はないが、HTMLのタグの属性でスタイルを書く時に間違える。
そもそも名前の書き方からして似ているが、よく見ると違っていて混乱してしまう。
ただ、HTMLでスタイル設定をしないのが基本だから、それをする方が悪いと言えるかな。

さらに、ページのHTMLソース表示も、おやっと思うことがある。
属性の順序が入れ替わっていたりとかあったはず。
スクリプトで動くページはブラウザの開発ツールが便利だが、これも似たようなものか。

頭の体操としては、良いのかも知れないが。
僕としては、面倒だと思う気持ちの方が強いのであるよ。

このブログ表示がFirefoxで崩れていた・・・
もっぱらIEを使っていたので気付かなかったが、Firefoxでは上部のナビゲーション表示に異常があった。

その原因は、このブログのページ機能でタイトルのテキスト長が関係していた。
ページのタイトルテキスト長が長すぎれば、ボタンの幅が広がりオーバーフローしてしまう。
その際にIEではなんとか収まっている場合でも、Firefoxではオーバーフローして表示崩れが発生する事がある。

この事はあたり前なのだが、Firefoxでの表示確認を怠っていたために気付かなかった。
発生したのは一ヶ月ちょっと前くらいかと思うが、ページのタイトルを変更した時からだろう。
ついさっき、何気なくFirefoxでこのブログを眺めていて気付いた。
現在はページタイトルのテキストを修正したので、正しく表示されている。

実はFirefoxでは検索窓の幅がIEに比べて長いのだが、テンプレートを作った時に修正していなかった。
あの頃は修正をするつもりであったが、いつの間にか忘れてしまった。
今さら面倒な事であるし、頭の回転が追いつかないので当分は修正しないつもりである。

しかし、ブラウザ間での表示の違いはホント困るよ・・・
CSSとか苦手だし！