「その他」カテゴリーアーカイブ

【サイト管理者向け】スマホサイトに埋め込まれたYoutubeが再生できない場合の対処法

このページはサイトを作る方向けの情報です。サイトを閲覧している方向けの対処法は掲載しておりませんのでご注意ください。

自社のサイトにYoutubeにアップしたPR動画などを埋め込みたいことがあると思います。
埋め込んでみていざ確認してみると……「この動画は現在再生できません」と表示されるケースがあります。

これは埋め込む側の設定で対処できるケースがあるので、その対処法をまとめました。
※今回は検証した環境はiPhone5s(iOS 7.0.4)のSafariです。

Youtubeの動画の埋め込み方法

すでにYoutube動画の埋め込みコード取得の方法を知っている方はこの部分は読み飛ばしていただいてOKです。

1.埋め込みたい動画を表示する

まずは埋め込みたい動画のページを表示してください。
今回は説明用サンプルとして「https://www.youtube.com/watch?v=KyCYyoGusqs」を使っています。

2.動画の下にある「共有」タブをクリック

step2

3.「共有」タブをクリックして表示された部分にある「埋め込みコード」をクリック

step3

4.表示されたHTMLコードをコピーして、埋め込みたい部分に貼り付ける

step4

以上が基本的なYoutubeの動画を埋め込む際の手順になります。

埋め込んだ動画が再生されない!

ここからが本題です。
おそらく埋め込んだ動画はPCでは再生できると思います。
(PCでも再生できないケースがあるようですが、ここでは省略します)

Youtubeの埋め込みの標準設定

Youtubeから動画を埋め込む際の標準の設定は以下のようになっていると思います。
動画のサイズ:560×315
動画が終わったら関連動画を表示する(チェックあり
プライバシー強化モードを有効にする(チェックなし)
以前の埋め込みコードを使用する(チェックなし)

標準設定のままの動画


再生すると私の環境では「この動画は現在再生できません」と表示され、埋め込んだ動画が再生できませんでした。

解決方法

解決方法は至ってシンプルでした。
「プライバシー強化モードを有効にする」にチェックを入れる
これだけです!
answer

「動画が終わったら関連動画を表示する」にチェックを入れるかどうかはどちらでも大丈夫だと思います。
「以前の埋め込みコードを使用する」はチェックを入れない方がいいと思います(未検証)。

埋め込みコードを変更した後の動画

再生を始めるとYoutubeアプリが立ち上がって再生されました。

おわりに

動画のソースが「プライバシー強化モードを有効にする」にチェックを入れる前は、
www.youtube.com
だったのに対して、チェックを入れた後は、
www.youtube-nocookie.com
になっているようです。

Youtubeは動画をアップロードしてサイトに埋め込む際に非常に役に立つサービスですが、サイトに埋め込んでも実際に再生できないと意味がありません。
ちょっとした設定を変えるだけで再生可能になるので覚えておくと何かの時に役に立つかもしれませんね!

おまけ

スマホ向けのページに埋め込む場合にはプレイヤーのサイズを以下のようにしておくと良さそうです。
appendix
「動画のサイズ」の部分を「カスタムサイズ」にして、左側の入力ボックスに「320」と入力すればOKです。
(右側の入力ボックスには自動でサイズが計算されます)
iPhone向けだとこの設定がいいのではないでしょうか。

現在地の情報を一覧できるページを公開ました

スマートフォンを持って外出した際に、今いる場所の情報を一覧できるページを公開しました。
» 現在地の情報表示ページ

ページを開くと現在位置取得のダイアログが表示されますので「OK」(端末によって表示は違うかもしれません)を押すと情報が表示されます。
基本的にはスマートフォンでの利用を想定して作成しております。
自分で使う用に作りましたが使える方もいるかもしれませんので、公開します。

情報一覧の中で、他ではあまり見ない(と思われる)機能として、
「熊本城付近」というように住所だけではなくランドマークを目印とした表現があるのがポイントです。
これを使うことでタクシーを呼ぶ際や、土地勘のある人への連絡の際に非常にスムーズに場所の情報を伝えることが可能になります。
今いる場所の情報を友達に教える場合などに便利な「LINEで送る」リンクも設置しております。

他には「1時間以内の降水量の予測」や「標高」などの情報を表示してます。
天気情報に関してはもっと長いスパンでの情報も欲しいので今後の課題です。

技術的には、「Geolocation API」や「Yahoo!JAPANが提供するAPI」を使って実現をしてます。
(細かいところはソースを見てもらえばわかると思います)

GoogleMapsAPIではなくYahooの地図を使いましたが、特に理由はありませんw
いつもGoogleを使っていたので試しに使ってみたという感じです。

軽く使ってみた印象としては、ラベル表示(マーカーではなく文字列をはれる)が便利かなと思いました。
GoogleMapsAPIだとマーカーしかないので、場所と名称を表示したい場合でもクリックしてポップアップさせる必要がありました。
しかし、Yahooだとラベルとして表示されるので見やすいかなと思います。
(表示する文字列が長くなると地図面が見づらくなるので、一定の文字数で切ってあげる必要はありそうです)
名称がわかればいいケースなどでは使う側としても便利ではないでしょうか。

今後はGoogleMapsAPIとYahoo地図APIの比較なども記事にしていきたいと思います。

イベント情報検索サイトとして再公開しました

以前、美術館イベント情報検索サイトとして公開したサイトですが、情報の更新の頻度や情報量を考えた際にもっと多くの情報を掲載したいと思い、イベント情報全般を取り扱うサイトにすることにしました。

立ち上げて間もないサイトだったのですが、α版ということでご了承ください。。。

以前ブログを書いた際にはなかったのですが、各都道府県ごとのTOPページも用意し、より使いやすいサイトになったとう思います。

現在情報を追加しておりますので、お出かけの際にでもご利用下さい。

» イベント情報検索サイト

美術館イベント情報検索サイトを公開しました

美術館で開催されるイベント情報を検索できるサイトを公開しました。
(まだα版ですが。。。)
スマートフォンでの閲覧を優先してレイアウトしております。

美術館イベント情報検索サイト

福岡や熊本の美術館イベント情報をカレンダー形式で検索

トップページでカレンダーを表示し、調べたい日をクリックするとその日に開催予定のイベントが表示されるようになっています。
イメージとしてはGoogle画像検索のようなUIを目指しました。

現在はまだ福岡県と熊本県の美術館の情報しかありませんが、少しずつ範囲を広げて情報を充実させていこうと思います。
対象となる県が多くなると今のUIだと厳しいかなと思ってますが、適宜カスタマイズをして使いやすいサイトを目指していく予定です。

はじめに

はじめまして、株式会社みのモンの代表の蓑毛(みのも)です。
日常の業務などで疑問に思って調べたことや新しい技術の紹介などをこのブログを通してやっていければと思います。

難しいネタはそこまで多くないかもしれませんが、ちょっとしたことやjqueryプラグインなどを試したことなどを中心に書いていこうと思います。