モンモンブログ

技術的な話など

vimeoの埋め込み動画が表示されなくて困ったけどプロトコルをhttpsにしたら解決した

動画を埋め込む時は動画URLのプロトコルhttps にしておきましょうというお話。

このvimeoの動画は下のようなHTMLで埋め込んでます。

<iframe
  src="http://player.vimeo.com/video/69996517"
      ↑動画URLのプロトコルはhttp
  width="480"
  height="360"
  ></iframe>

動画URLのプロトコルhttp です。これで何の問題もなく再生できますよね。

ですが、動画を埋め込んでるページ(このブログ)自体のURLのプロトコルhttps だった場合、ブラウザによっては(具体的には FirefoxGoogle Chrome などでは)動画が表示されません。からっぽの長方形が表示されるだけです。

MacOSXFirefox 29.0.1, Google Chrome 34.0.1847.137 で確認。Safari 7.0.3, Opera 10.9.2 ではプロトコルに関わらず動画が表示されました)

<iframe
  src="https://player.vimeo.com/video/69996517"
       ↑プロトコルをhttpsに変更
  width="480"
  height="360"
  ></iframe>

こうやって動画URLのプロトコルhttps にしておけば、ページのURLのプロトコルが http だろーと https だろーとちゃんと表示されます。これで安心。

以上です(:3[___]

実験

でもまあ「ほんまかいな?」て人は実験してみましょう。

以下を video.html ってファイル名でどこでもいいので保存して、

<!DOCTYPE html>
<html lang="ja">
    <head>
       <meta charset="utf-8">
       <title>vimeo sample</title>
   </head>
    <body>
        <div style="float:left">
            <div>動画URLのプロトコルがhttp</div>
            <iframe
                 src="http://player.vimeo.com/video/69996517"
                 width="480"
                 height="360"
                 ></iframe>
        </div>
        <div style="float:left">
            <div>動画URLのプロトコルがhttps</div>
            <iframe
                 src="https://player.vimeo.com/video/69996517"
                 width="480"
                 height="360"
                 ></iframe>
        </div>
    </body>
</html>

同じディレクトリに、以下を https-server.rb ってファイル名で保存して、
httpsなWebサーバを立ち上げるスクリプトです。cf. WEBrickでSSLを有効にする

#!/usr/bin/env ruby
require 'webrick'
require 'webrick/https'

server = WEBrick::HTTPServer.new(
    :BindAddress => '127.0.0.1',
    :Port => 9999,
    :DocumentRoot => '.',
    :SSLEnable  => true,
    :SSLCertName  => [ [ 'CN', 'localhost' ] ]
)
Signal.trap('INT') { server.shutdown }
server.start

実行してWebサーバを立ち上げまして、

$ ruby https-server.rb

さっき作った vimeo.htmlhttps で開いてみます。不正なSSL証明書だよって怒られるけど適当にパスして下さい。

https://localhost:9999/vimeo.html

Firefox, Google Chrome では https の方の動画だけ表示されるかと思います。こんな風に。

f:id:ymdsmn:20140520101842p:plain

以上でござる(:3[___]