はてなブログでYouTube動画を埋め込んだ時にでる「フレームの読み込みが中断しました」のエラーを解決しました。

iPhoneのはてなブログアプリでYouTubeの動画を埋め込んだ記事を閲覧しようとすると、「フレームの読み込みが中断しました」というエラーメッセージが表示されました。iPhoneのSafiriでも確認してみると同様の症状が出てきてしまいます。YouTubeを埋め込んだ箇所は真っ白な空白行になっていて動画を見ることができない状態です。

二通りの方法で解決。どちらの方法でも解決しました

調べてみてそれぞれ方法が違うのですが、どちらの方法でもこの症状が解決されました。実践したのは以下の記事に記載されていた方法です。ありがとうございます。

YouTubeの貼り付け方法を変更すると解決しました

それぞれの記事によると方法は２つ

• 方法１：動画URLの後ろに「:embed」といれる
• 方法２：YouTubeのサイトから「埋め込みコード」を取得する

両方の方法を実践してみました。

方法１：動画URLの後ろに「:embed」といれる

動画URLの後ろに「:embed」と入れると解決するようです。「みたまま」の編集画面で動画のURLを貼り付けようとすると、「埋め込み方法の選択画面」が出てきました。このまま埋め込み動画を選択すると以前と変わらないので一旦右上の「☓」で画面を消しました。

URLが記載されています。

後ろに「:embed」と入力しました。

入力した後で気付いたのですが、編集の方法を「見たまま」ではなく「HTML編集」にすると「埋め込み方法の選択画面」がでないようですね。編集後、iPhoneアプリでプレビューしてみると「フレームの読み込みが中断しました」とエラーが出てしまいますが

YouTube動画は表示されるようになりました。

再生もできました。iPhoneのSafariではエラーメッセージは表示されなくなり、普通にYouTubeが再生されます。

※再度確認するのに、今度は「:embed」を入力する際に「HTML編集」から行うとエラーはでませんでした。はじめに「みたまま」でURLを貼り付けたのがよくありませんでした。

方法２：YouTubeのサイトから「埋め込みコード」を取得する

YouTubeのサイトへ行き、埋め込みたい動画ページにある「共有」をクリックすると「共有」「埋め込みコード」「メール」が表記されるので、その中の「埋め込みコード」をクリックします。そうすると埋め込みコードが表示されるのでこちらをコピーしました。

次にはてなブログの編集画面で先程のコピーしたURLを貼り付けます。

iPhoneのはてなブログアプリでプレビューを確認します。こちらの方法でもエラーが表示されず動画も表示されました。

どうやら別の問題も重なっていたようです

最後にもう一度はてなブログの編集画面にあるサイドバーでYoutube貼り付けを行ってみました。やはりiPhoneの「はてなブログ」アプリでプレビューすると、変わらず「フレームの読み込みが中断しました」と表記されますが、動画は表示されるようになりました。

iPhoneのSafariで確認すると、エラーは表示されませんが、ずっとページが読込中でYoutubeの埋め込み箇所は真っ白です。

ようやくここまできて気付きました。iPhoneのSfariにある大量のタブを消せばいいのではないのかと。案の定、大量にあったSafariのタブを消すとYotubeの埋め込み動画が表示されるようになりました。どうやらこちらの問題はiPhoneのメモリが不足していて起きた問題のようでした。

• 「フレームの読み込みが中断しました」というエラー表示
•   埋め込みのYouTube動画が表示されない

という問題は、それぞれ別の問題が重なっていたようです。iPhoneを使用するときは余分なタブを消したり、使っていないアプリを終了しなくては思いました。反省です。

iPhone 6便利すぎる! 200のテクニック 改訂版 (超トリセツ)