wepli.2

うぇぷり どっと に

埋め込み動画のデザインを簡単にカスタマイズできる『reEmbed』を使ってみた

埋め込み動画 カスタマイズ

今回の記事はブロガーさんやサイト運営者さん向けの記事です。皆さんの中にも、YouTubeやDailymotionなんかの動画共有サイトの動画をブログやサイトに埋め込んでいる人も多いと思います。当ブログでも、先日『AZ スクリーンレコーダー』でゲームのプレイ動画を試しに録画してYouTubeにアップしてみました。

wepli-dot2.hatenablog.com

YouTubeやDailymotionの動画をブログやサイトに埋め込むのは簡単ですが、どれも普通の埋め込み動画になってしまいます。『もっと埋め込み動画をサイトのデザインに合ったものにしたい』って方のために、今回は『reEmbed』というWEBサービスをご紹介します。前置きが長くなりましたが、『reEmbed』を使えば埋め込み動画のデザインをオシャレに簡単にカスタマイズできます。

『reEmbed』の使い方 埋め込み動画のカスタマイズ方法

まずは『reEmbed』にアクセス

それでは、さっそく『reEmbed』で埋め込み動画のデザインをカスタマイズしてみたいと思います。まずは『reEmbed』にアクセスしてください。

reEmbed 公式サイト

『reEmbed』にアクセスしたら『Create your free player』をクリックします。

Create your free player

プレイヤースタイルの選択

次に埋め込み動画のプレイヤースタイルの選択です。僕は上から3番目の再生ボタンが丸いデザインのスタイルを選びました。皆さんは7つのスタイルからお好みのものを選んでください。

プレイヤースタイル

設定画面

プレイヤースタイルを選択すると下の画面になりますので、簡単に画面の説明をしておきます。

reEmbedの設定

① ロゴのアップロード

② プレイヤースタイルの色

③ 動画フレーム上部の余白

ロゴのアップロード

それでは埋め込み動画にロゴを入れてみたいと思います。『Upload your logo』の矢印アイコンをクリックしてください。ここから、自分で作成したロゴを『reEmbed』にアップロードします。ちなみにロゴのサイズは『40KB以下』でないとアップロードできないので注意してください。

ロゴのアップロード

ロゴの設定

アップロードが終了したら次はロゴの設定です。

ロゴの設定

①の『Logo link』でロゴをクリックした時のURL先を指定することができます。YouTubeなどでよく動画配信している方は、自分の動画共有サイトのチャンネルを指定しておくといいかもしれません。

② の『Logo position』でロゴを左上に配置するか、右上に配置するか設定することができます。

③の『Logo scale』などでロゴのサイズや余白を決めることができます。

MEMO ちょっと寄り道

僕の場合はロゴの作成に『Inkscape』を、画像のリサイズに『Ralpha Image Resizer』を使用しています。どちらも無料のフリーソフトで、評判が高いので試してみてください。

Inkscape

Ralpha Image Resizer

プレイヤースタイルの配色と上部の余白

プレイヤースタイルの配色

①でプレイヤーのボタンなどの配色を決めることができます。②の『Player padding-top』ですが、画像の矢印で示した通り、埋め込み動画のプレイヤー上部の余白を設定することができます。ここに自由に画像などを貼り付けることが可能です。特別な事情がない限り『Player padding-top』はいじらなくて大丈夫ですね。

アカウントの登録

全てのカスタマイズが終了したら、『Save player』をクリックします。

Save player

クリックすると以下のようにアカウント作成画面になるので、メールアドレスとパスワードを入力して、『I agree.....』にチェックを入れて『Register for free』をクリックすれば完了です。

アカウント作成

ブログのheadにコードをコピペ

あとはブログの設定などからheadに『reEmbed』のコードをコピペするだけです。『HTML』や『Wordpress』などに対応しています。僕が使っているブログサービスは『はてなブログ』なので、今回は『はてなブログ』を例にコードをコピペしてみたいと思います。

コード headへ

ブログに『reEmbed』のコードを貼り付けたいので、『HTML』を選択してください。そしたら『Copy the code below』のコードをコピーして『はてなブログ』のダッシュボードから『設定 ⇒ 詳細設定 ⇒ headに要素を追加』の欄に貼り付ければ終了です。

ブログにコード貼り付け

さいごに

文字で説明すると非常に長くてややこしいように感じるかもしれませんが、実際にやってみると凄く簡単です。『reEmbed』にアカウント登録してしまえば、その後『ちょっとプレイヤーのスタイルを変えたいなぁ~』なんて時も、『reEmbed』にアクセスして埋め込み動画のデザインを編集するだけなので、簡単に再びカスタマイズすることも可能です。『埋め込み動画のデザインでちょっと個性を出したい』なんて方は、ぜひ『reEmbed』を試してみてくださいね。長文失礼しました。以上で埋め込み動画のデザインのカスタマイズを終わります。