Warning: Trying to access array offset on value of type bool in /home/yotigory/codingmania.net/public_html/wp-content/plugins/search-everything/config.php on line 29

Warning: Cannot modify header information - headers already sent by (output started at /home/yotigory/codingmania.net/public_html/wp-content/plugins/search-everything/config.php:29) in /home/yotigory/codingmania.net/public_html/wp-includes/feed-rss2.php on line 8
WordPress アーカイブ - CodingMania https://codingmania.net/category/wp コーディングマニアは、コーダーやWEBデザイナーが、効率よくコーディング作業が出来ることを目指したサイトです。 Sun, 10 Oct 2021 07:27:33 +0000 ja hourly 1 https://wordpress.org/?v=5.8.10 WordPress のYouTube埋め込みの iframe をレスポンシブ対応する https://codingmania.net/jquery/1811.html https://codingmania.net/jquery/1811.html#respond Sun, 10 Oct 2021 06:49:40 +0000 https://codingmania.net/?p=1811 JSを読み込みます jQuery[js_youtube.js] CSS

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

]]>
JSを読み込みます
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 に最初に表示されました。

]]>
https://codingmania.net/jquery/1811.html/feed 0