if ( is_single() ) {
wp_enqueue_script( 'js_youtube', get_template_directory_uri() . '/js/js_youtube.js',  array('jquery'), false, true );
}

jQuery[js_youtube.js]

jQuery(document).ready(function () {
	$(function () {
		$('iframe').each(function () {
			let frame = $(this);
			let div = document.createElement('div');
			div.className = 'youtube';
			if ((frame.is('[src*="youtube"]'))) {
				$(this).wrap(div);
			}
		});
	});
});

CSS

/* youtube
-----------------------------------------*/
.youtube {
position: relative;
width: 100%;
padding-top: 56.25%;
}

.youtube iframe{
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}

投稿 WordPress のYouTube埋め込みの iframe をレスポンシブ対応する は CodingMania に最初に表示されました。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="1.1.8/html5media.min.js"></script> 

HTMl

<video src="movie/movie.mp4" width="640" height="360" poster="poster.jpg" controls autobuffer preload="auto"></video>

投稿 html5media.jsを使ってmp4形式の動画を埋め込みます は CodingMania に最初に表示されました。

<script src="video.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="video-js.css" type="text/css" media="screen" title="Video JS" charset="utf-8">
<script type="text/javascript">VideoJS.setupAllWhenReady();</script>

HTMl

<!-- Begin VideoJS -->
<div class="video-js-box">
<!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
<video id="example_video_1" class="video-js" width="640" height="360" controls="controls" preload="auto" poster="poster.jpg">
<source src="movie/movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="movie/movie.ogv" type='video/ogg; codecs="theora, vorbis"' />
<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
<object id="flash_fallback_1" class="vjs-flash-fallback" width="640" height="360" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"playlist":["https://codingmania.net/demo/video/0003/poster.jpg", {"url": "https://codingmania.net/demo/video/0003/movie/movie.mp4","autoPlay":false,"autoBuffering":true}]}' />
<!-- Image Fallback. Typically the same as the poster image. -->
<img src="poster.jpg" width="500" height="309" alt="日本の滝の映像" title="日本の滝の映像" />
</object>
</video>
</div>
<!-- End VideoJS -->

投稿 「video.js」を使った動画ページ は CodingMania に最初に表示されました。

<video poster="poster.jpg" width="640" height="360" controls preload>
<source src="https://codingmania.net/demo/video/0001/movie/movie.mp4" />
<source src="https://codingmania.net/demo/video/0001/movie/movie.ogv" /> 
<p>ご利用のブラウザーでは再生できません。<a href="movie/movie.mp4">コチラ</a>からダウンロードしてください。</p>
</video>

投稿 html5のvideo要素だけを使って動画を再生する は CodingMania に最初に表示されました。