03-6452-8917
シェア
ツイート
ミルビィブログではお初にお目にかかります！
今年の2月からミルビィチームの一員となりました、カスタマーサクセス担当のsayuriです。
趣味は海外旅行です。毎年どこかに旅立っています。
↑ブルーモスク＠イスタンブール
普段は、ご契約中のお客様にミルビィをより広く・深くご利用いただけるような活動をしています。
今後、ブログだけでなく実際に皆さまにお目にかかれる機会があることを楽しみにしております！
どうぞよろしくお願いします。
さて、今回は先日リリースされた「ミルビィのプレイヤーがiframeに対応した件」についてお話いたします。
少し技術的なお話にはなってしまうのですが、今まで動画が埋め込めなかったページにもこちらを利用することで解消するケースもございますので、ぜひお付き合いください！
※今回のリリースは「millvi（ミルビィ）」向けのものとなっております。
「millviポータル」「millviポータルEC」等のサービスについては対象外となりますので、ご了承ください。（2019年4月現在）
１．iframe（インラインフレーム） とは
iframe（インラインフレーム）とは、HTMLページの中に別のHTMLファイルを入れ子のように埋め込むHTMLタグです。
例えば、ミルビィ管理画面の「お知らせ」欄には、iframeが使用されています。
HTMLの <body> 内に <iframe src=”●●●●.html”></iframe> といったように、iframeタグを埋め込みます。
“●●●●.html” の部分にお知らせの中身が記載されているHTMLファイルを埋め込み、入れ子のように表示しています。
２．機能概要
今回のリリースで、iframe内にミルビィの動画プレイヤーを埋め込むことができるようになりました。
従来、PC/スマートフォン向けのWebページにミルビィの動画プレイヤーを埋め込む場合、
JavaScriptを利用した埋め込みコードを使用する必要がありました。
もちろん今後もこちらの埋め込みコードは引き続きご使用いただけます！
一方で、「XSS対策でJavaScriptタグの埋め込みを禁止しているようなWebページにも、ミルビィの動画プレイヤーを埋め込みたい！」 といったご要望もお客様からいただいておりました。
そのようなWebページにも動画プレイヤーを埋め込むことができるのが、iframeタグを使用した埋め込みコードです。
<iframe> タグの中に、ミルビィのプレイヤーが埋め込まれているHTMLファイルがさらに埋め込まれています。
お客様のWebページ <body> 内の任意の箇所にこちらのタグを埋め込むと、動画プレイヤーが表示されます。
３．管理画面での操作方法
ここまでサラッと触れてまいりましたが、管理画面における実際の操作についてご案内いたします。
まず、管理画面で「コンテンツ」 ① 、「コンテンツ管理」から表示したいコンテンツがあるフォルダ ② 、表示されたコンテンツ ③ を順にクリックします。
コンテンツの詳細画面の「埋め込みコード／URL」で、使用したいプレイヤーを選択します。 ④
「iframe」タブ ⑤ に切り替え、「クリップボードにコピー」 ⑥ をクリックし埋め込みコードをコピーします。
動画を表示するHTMLファイルの <body> 内に、コピーした埋め込みコードを挿入したら完成です！
４．TIPS 〜iframeプレイヤーサイズ指定のコツ〜
動画プレイヤー埋め込みの基本的な手順は前項でご紹介した通りですが
iframeを使って動画プレイヤーの埋め込みをする際のプレイヤーのサイズ指定のコツをご案内します。
通常、プレイヤーの表示サイズは管理画面のプレイヤー設定画面から行なうことができますが、
プレイヤーがiframeより大きいサイズに設定されていると、以下のようにスクロールバーが表示されてしまい
動画全体が見づらくなってしまうことがあります。
その場合は、プレイヤーのサイズをレスポンシブ（画面の大きさに合わせて最大化）にする設定を行ない、
iframe側をCSSで任意のサイズ設定することにより、前項のように綺麗に表示することが可能となります。
作成済みのプレイヤーをレスポンシブに変更する場合、以下の手順で行なうことができます。
まず、管理画面で「プレイヤー」 > 編集したいプレイヤー名をクリック > 画面右下の［編集］をクリックします。
設定ボタン（歯車マーク） ① をクリックし、「プレイヤー基本設定」から「レスポンシブ」②
を「有効」に変更し、［OK］ ③ をクリックします。（画面比率は16:9か4:3をお選びいただけます。）
画面右下の［保存］をクリックし、管理画面右上の［公開］ボタンをクリックすると設定完了です！
※ご注意
レスポンシブ機能は、シングルプレイヤーのみ対応しております。
プレイヤーを新規作成する場合は、こちらをご覧ください。
今回ミルビィプレイヤーのiframe対応についてご説明いたしました。
従来動画プレイヤーの埋め込みができなかったページがあるお客様は、ぜひお試しいただければ幸いです。
これらの設定についてご不明な点がございましたら、サポートまでお問い合わせください！
>>サポートページはこちら
<< 安定した動画配信なら「millvi（ミルビィ）」へおまかせ >>
導入実績700社を誇る、国産のクラウド型動画配信システム「millvi(ミルビィ）」。 ITに詳しくない方にも分かりやすいUI・UXや、日本語でのサポート対応があり、ご導入が初めての方にも安心してご利用いただけます。 会員向けの動画共有ポータルサイト「millviポータル」や動画販売ECサイト「millviポータルEC」など、さまざまなニーズにご対応。詳しくは、サービスページまで。
