クラウド型(SaaS型)動画配信システム millvi(ミルビィ)

資料請求はこちら

お問い合わせ

03-6459-1594

ミルビィブログ

【リリース】ミルビィの動画プレイヤーがiframeに対応しました

カテゴリ:ミルビィ活用法 ,メルマガ ,新機能リリース ,機能説明


ミルビィブログではお初にお目にかかります!
今年の2月からミルビィチームの一員となりました、カスタマーサクセス担当のsayuriです。

趣味は海外旅行です。毎年どこかに旅立っています。

↑ブルーモスク@イスタンブール

普段は、ご契約中のお客様にミルビィをより広く・深くご利用いただけるような活動をしています。
今後、ブログだけでなく実際に皆さまにお目にかかれる機会があることを楽しみにしております!
どうぞよろしくお願いします。

 

さて、今回は先日リリースされた「ミルビィのプレイヤーがiframeに対応した件」についてお話いたします。
少し技術的なお話にはなってしまうのですが、今まで動画が埋め込めなかったページにもこちらを利用することで解消するケースもございますので、ぜひお付き合いください!

※今回のリリースは「millvi(ミルビィ)」向けのものとなっております。
「millviポータル」「millviポータルEC」等のサービスについては対象外となりますので、ご了承ください。(2019年4月現在)

 

 

1.iframe(インラインフレーム) とは

iframe(インラインフレーム)とは、HTMLページの中に別のHTMLファイルを入れ子のように埋め込むHTMLタグです。

例えば、ミルビィ管理画面の「お知らせ」欄には、iframeが使用されています。

HTMLの <body> 内に <iframe src=”●●●●.html”></iframe> といったように、iframeタグを埋め込みます。

“●●●●.html” の部分にお知らせの中身が記載されているHTMLファイルを埋め込み、入れ子のように表示しています。

 

2.機能概要

今回のリリースで、iframe内にミルビィの動画プレイヤーを埋め込むことができるようになりました。

従来、PC/スマートフォン向けのWebページにミルビィの動画プレイヤーを埋め込む場合、
JavaScriptを利用した埋め込みコードを使用する必要がありました。

もちろん今後もこちらの埋め込みコードは引き続きご使用いただけます!

 

一方で、「XSS対策でJavaScriptタグの埋め込みを禁止しているようなWebページにも、ミルビィの動画プレイヤーを埋め込みたい!」 といったご要望もお客様からいただいておりました。
そのようなWebページにも動画プレイヤーを埋め込むことができるのが、iframeタグを使用した埋め込みコードです。

<iframe> タグの中に、ミルビィのプレイヤーが埋め込まれているHTMLファイルがさらに埋め込まれています。
お客様のWebページ <body> 内の任意の箇所にこちらのタグを埋め込むと、動画プレイヤーが表示されます。

 

3.管理画面での操作方法

ここまでサラッと触れてまいりましたが、管理画面における実際の操作についてご案内いたします。

 

まず、管理画面で「コンテンツ」 、「コンテンツ管理」から表示したいコンテンツがあるフォルダ 、表示されたコンテンツ を順にクリックします。

 

コンテンツの詳細画面の「埋め込みコード/URL」で、使用したいプレイヤーを選択します。

 

「iframe」タブ に切り替え、「クリップボードにコピー」 をクリックし埋め込みコードをコピーします。

 

動画を表示するHTMLファイルの <body> 内に、コピーした埋め込みコードを挿入したら完成です!

 

実際にiframeを使って本ブログ記事ページに動画プレイヤーを埋め込んだのがこちら↓

オレンジの部分が本ページ部分(iframe外側)、
水色の部分がミルビィによって生成された部分(iframe内側)となっております。

ちなみに、こちらは香港の有名な夜景「シンフォニー・オブ・ライツ」を観光した際に撮影した動画です。
人があまりにも多く撮影が困難だったため、手ブレが激しい点はご容赦ください……

 

4.TIPS 〜iframeプレイヤーサイズ指定のコツ〜

動画プレイヤー埋め込みの基本的な手順は前項でご紹介した通りですが
iframeを使って動画プレイヤーの埋め込みをする際のプレイヤーのサイズ指定のコツをご案内します。

通常、プレイヤーの表示サイズは管理画面のプレイヤー設定画面から行なうことができますが、
プレイヤーがiframeより大きいサイズに設定されていると、以下のようにスクロールバーが表示されてしまい
プレイヤー全体が表示できず、見づらくなってしまうことがあります。

その場合は、プレイヤーのサイズをレスポンシブ(画面の大きさに合わせて最大化)にする設定を行ない、
iframe側をCSSで任意のサイズ設定することにより、前項のように綺麗に表示することが可能となります。
作成済みのプレイヤーをレスポンシブに変更する場合、以下の手順で行なうことができます。

 

まず、管理画面で「プレイヤー」 > 編集したいプレイヤー名をクリック > 画面右下の[編集]をクリックします。

 

設定ボタン(歯車マーク) をクリックし、「プレイヤー基本設定」から「レスポンシブ」
を「有効」に変更し、[OK] をクリックします。(画面比率は16:9か4:3をお選びいただけます。)

 

 

画面右下の[保存]をクリックし、管理画面右上の[公開]ボタンをクリックすると設定完了です!

 

※ご注意
レスポンシブ機能は、シングルプレイヤーのみ対応しております。
プレイヤーを新規作成する場合は、こちらをご覧ください。

 

今回ミルビィプレイヤーのiframe対応についてご説明いたしました。
従来動画プレイヤーの埋め込みができなかったページがあるお客様は、ぜひお試しいただければ幸いです。

これらの設定についてご不明な点がございましたら、サポートまでお問い合わせください!
>>サポートページはこちら