【採用動画を撮ってみたい企業必見】採用動画を簡単にホームページに組み込めるAPIの提供をスタート!

アイキャッチ画像

企業様の声を聞いた上で、すぐに対応するのがmoovyの方針ではありますが、

今回、要望があって、採用ホームページに組み込むシステムを、HTMLファイル+CSS+Javascriptのファイル以外に、

iframeで簡単に組み込むことが可能になりました。

百聞は一見にしかずということで、実際に埋めこむ想定は下記のような感じになります。

実際にこの方法で組み込まれた例としては、noco株式会社様の採用ホームページ をご覧ください。

 

組み込む方法は、とても簡単です。

動画管理画面の動画一覧の中から、埋め込みコードボタンを押していただくと、

埋め込みコード用ボタン

下記のような埋め込み用のコードが表示されます。

組み込みコード画像

Youtubeの埋め込みをしたことがある方は、同じようなことをしていると思います。

このコードをコピーして、ワードプレスのテキスト入力でペーストするだけで実装ができます。

また、タグの中に書いてあるwidthやheightなどを調整すれば、ある程度の修正が可能です。

 

前回の方法である、HTML+CSS+JavascriptファイルをFTPで埋め込むパターンとの違いについて説明します。

https://moovy.co.jp/column/37/

基本的にどちらの方法でも採用ホームページへの組み込みの実装は可能です。

 

①HTML+CSS+Javascriptでの実装のメリット/デメリット

○CSSが分かる人であれば、レイアウトを自由に実装することができる。
●FTPでサーバーに入ったり、HTML+CSSなどが分からないと実装をするのに障壁がある

 

②iframeでの実装のメリット/デメリット

○とても簡単。コピペをするだけで実装することができる。微調整は数字を少し変更するだけ。
●レイアウトの自由度が狭い。iframeは、そのタグの中は弊社のURLの中身を呼び出している形なので、弊社が事前に作成したレイアウトを変更することができない(おおもとのiframe自体の大きさを変更することは可能)

 

レイアウトの変更

<iframe ID=”moovy_iframe88″ frameborder=”0″ scrolling=”no” src=”https://moovy.jp/api/projects/88″ style=”border: none; height: 305px; width: 100%; max-width: 400px; min-width: 240px;”></iframe>

このようなコードをコピーしてきたとして、

heightは高さ、widthは横幅、max-width、min-widthは最大、最小の横幅となります。

なので、その数字を増やしたり減らしたりすることで調整することが可能です。

 

仕様

基本的に以前までのAPI機能と同じです。

クライアント様の採用ホームページからmoovy,jpの動画詳細ページに飛んできた場合、ログインなしで動画を再生することができるようにしています。

 

ほか、ご不明点や導入に関するアドバイスは一社一社対応しておりますので、ぜひご連絡いただければと思います。

 

また、採用ホームページに動画を組み込みたいといった企業様がいらっしゃれば、問い合わせフォームからご連絡ください!

この記事を書いた人
松尾 圭介

公務員勤務を経た後、2020年4月、株式会社moovyにフルスタックエンジニアとして参画。Laravel+Vue.js+AWSでサーバーサイドから、フロントエンドでの開発も行う。 ジーズアカデミーTOKYO LABコースのLaravel授業の講師も受け持つ。