• line

kintoneアプリへのYouTube動画の埋め込み方法2 レコード一覧画面に埋め込む

kintone SI

kintoneアプリへのYouTube動画の埋め込み方法2 レコード一覧画面に埋め込む

前回、アプリのレコード作成・編集画面にYouTubeの動画を埋め込みました。
今回はレコードの一覧画面に埋め込んでみましょう。
アプリの利用方法の説明や更新情報の通知のような使い方を想定する場合は今回の埋込方の方が適しているかもしれません。

レコード一覧ではスペースフィールドが使えないため、ヘッダーメニューの部分に埋め込みます。

埋め込み想定エリア

画像の赤枠のあたりになります。

ヘッダーメニューの要素を取得する。

kintone APIのgetHeaderMenuSpaceElementを使用して該当部分の要素を取得、動画を埋め込みます。


kintone.app.getHeaderMenuSpaceElement().innerHTML = ''<iframe width="560" height="315" src="https://www.youtube.com/embed/whTkfSGK_6M" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';


innerHTMLにYouTubeの埋込タグを流し込みます。

埋め込まれましたが動画がはみ出しています。

埋め込まれましたが、要素の高さが足りないので下方向にはみ出してしまっています。
ヘッダーメニューの高さを調整しましょう。


kintone.app.getHeaderMenuSpaceElement().style.height = "300px";


動画が埋め込まれました。

うまく埋め込むことができました。


ゴートップではkintoneを活用した業務の効率化のご相談を承っております。
現在の業務に課題を抱えている方は是非ゴートップにお問い合わせください。

詳しくは当社kintoneソリューションサービスのページをご覧ください。


お問い合わせ

  • line

お問い合わせ

お気軽にお電話ください。

0120-98-0016