【WordPress】ダッシュボードウィジェットに動画を埋め込んだウィジェットを追加する

example-dashboard-video-widget-function.php

function example_dashboard_video_widget_function() {
	ob_start();
	?>
<div class="example-dashboard-video">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/◯◯◯◯◯◯◯" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<p>もっと詳しい操作方法は<a href="" target="blank" rel="noopener noreferrer">こちらのリンク先の解説</a>をご覧ください。</p>
<style>
    .example-dashboard-video {
        position: relative;  // 外枠に設定
        width: 100%;         // 外枠の幅はウィジェットの内幅いっぱい
        height: 0;           // 外枠は高さ0に設定
        padding-top: 56.25%; // padding で 16:9 の高さを用意
    }
    .example-dashboard-video>iframe {
        position: absolute;      // 外枠を基準にする
        top: 0;                  // 上を合わせる
        right: 0;                // 右を合わせる
        width: 100% !important;  // 幅いっぱいに表示
        height: 100% !important; // 高さいっぱいに表示
    }
</style>
	<?php
	echo ob_get_clean();
}
function example_add_dashboard_video_widgets() {
	global $wp_meta_boxes;
	wp_add_dashboard_widget( 'example_dashboard_video_widget', 'エディター操作の解説動画', 'example_dashboard_video_widget_function' );
}
add_action( 'wp_dashboard_setup', 'example_add_dashboard_video_widgets' );

WordPressのダッシュボードをカスタマイズして動画やマニュアルを表示する方法