by: Jun

自動再生ミュート｜YOUTUBE的投稿裏方ネタ｜YOUTUBEの組み込み

おはようございます。

本日はホームページ制作をしている皆さんと情報を共有していこう！企画です。

ちょいちょい必要になる、「直接関係ない」が「サイトの機能」を「拝借」してホームページを制作するのが
当たり前なインターネットの世界。
そういう時代です。

YOUTUBEという巨大動画サイト。
動画を配信するのに、こんな便利はサイトは有りません。
活用する方が人生の時間を無駄にせずに済むというもの。
（筆者は独自配信とコンテンツ制作をおこなう仕事もしていますので、むしろ他力本願をお勧めします。自力で行うのはとても大変。）

ということで、いろいろサイトに答えが書いてあるネタです。
早速。なにをするのか整理します。（方法はもちろん一つではないので一例です。）
整理しつつ、個別に案内します。
◆本日やりたいこと
・WORDPRESSで　（※今回のTHEMESはCodilightのフリー版をたまたま使ってます　https://www.famethemes.com/themes/codilight/）
・YOUTUBE動画を
・音声はミュートして
・自動再生
・a)各ページに違う動画掲載したい　b)宣伝的にどのページにも同じように掲載したい
・サムネイルとは別に書きたい

◆行う事
・プラグインを使う。　　二つインストールしてください。　
　　１）Custom Field Template plugin　http://wpgogo.com/development/custom-field-template.html
　　２）Single Post Template Plugin　http://www.nathanrice.net/plugins/
・プラグイン用のソースを書く。
　【ダッシュボード】から、【設定】の中の【カスタムテンフィールド】を選んでソースを記入します。

[youtube_titleb]
type = textarea 
rows=1
cols=100
size = 50
label =YOUTUBEタイトル

[youtube_idb]
type = text
size = 35
label = YOUTUBE-ID

[youtube_widthb]
type = text
size = 35
label = YOUTUBE-幅


[youtube_HIGHb]
type = text
size = 35
label = YOUTUBE-高さ

・追加テンプレートのソースを書く。

<?php
/*
Single Post Template: YOUTUBE02
 */
get_header(); ?>

	<div id="content" class="site-content container <?php echo codilight_lite_sidebar_position(); ?>">
		<div class="content-inside">
			<div id="primary" class="content-area">
				<main id="main" class="site-main" role="main">
<a href="<?php if ( get_post_meta($post->ID,'youtube_titleb',TRUE) ): ?><?php echo post_custom("youtube_urlb")?><?php endif;?>" target="_blank">
<?php if ( get_post_meta($post->ID,'youtube_titleb',TRUE) ): ?><?php echo post_custom("youtube_titleb")?><?php endif;?></a>
<div id="youtube-movie">
    <div id="youtube-movie-content" >
        <div id="player"></div>
    </div>
</div>
				<?php while ( have_posts() ) : the_post(); ?>
					<?php get_template_part( 'template-parts/content', 'single' ); ?>
					<?php
						// If comments are open or we have at least one comment, load up the comment template.
						if ( comments_open() || get_comments_number() ) :
							comments_template();
						endif;
					?>

				<?php endwhile; // End of the loop. ?>
<div id='inner_space'></div><script type='text/javascript' src='//blogparts.blogmura.com/pts/js/parts_view.js' charset='UTF-8'></script><script type='text/javascript'>parts(1552887,"FFFFFF","600","001eff",600000,"111","4151","rank","http://artistclip.com/blog/", 3, 2, "F7F7F7", "001eff");</script>
				</main><!-- #main -->
			</div><!-- #primary -->

<?php get_sidebar(); ?>
<a href="//lifestyle.blogmura.com/creativelife/ranking.html" target="_blank"><img src="//lifestyle.blogmura.com/creativelife/img/creativelife88_31.gif" width="88" height="31" border="0" alt="にほんブログ村 ライフスタイルブログ クリエイティブライフへ" /></a><a href="//lifestyle.blogmura.com/creativelife/ranking.html" target="_blank">にほんブログ村</a>

<script type="text/javascript">
//YouTube Player API　を読み込みます。
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 
var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player("player", {  //"player"の箇所がHTMLのID名を指定
        width   : "<?php if ( get_post_meta($post->ID,'youtube_widthb',TRUE) ): ?><?php echo post_custom("youtube_widthb")?><?php endif;?>",  
        height  : "<?php if ( get_post_meta($post->ID,'youtube_HIGHb',TRUE) ): ?><?php echo post_custom("youtube_HIGHb")?><?php endif;?>",  
        videoId : "<?php if ( get_post_meta($post->ID,'youtube_idb',TRUE) ): ?><?php echo post_custom("youtube_idb")?><?php endif;?>",  
        wmode: 'transparent',
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        },
        playerVars: {
　　　　　　　'autoplay': 0,
            'loop': 1,
            'rel': 1,
            'showinfo': 0
        }
    });
}
function onPlayerReady(event) {
        event.target.playVideo();
        event.target.mute(); 
}
 
function onPlayerStateChange(event) {
}
</script>
<?php get_footer(); ?>

・CSSを追加する。

#youtube-movie {
  margin: 0 auto;
  width: 100%;
  max-width: 700px; /* 最大の横幅 */
}

#youtube-movie-content {
  padding-top: 56.25%;
  position: relative;
  width: 100%;
}

#youtube-movie-content iframe {
  height: 100% !important;
  left: 0;
  position: absolute;
  top: 0;
  width: 100% !important;
}

◆記事を書いてみる。
・YOUTUBEに見せたい動画をアップする。

・WORDPRESSの投稿を記入してみる。　
　　１）Single Post Template から、YOUTUBE02を選ぶ（名前は任意で付け直してください。）
　　２）カスタムフィールドテンプレートから　YOUTUBE-B　を選ぶ（名前は任意で付け直してください。）
・投稿を確認する
　　この投稿が例です。　投稿のタイトルよりも上に、YOUTUBEへの直リンクと自動再生ミュートのYOUTUBEが張り付きました。
◆複数のサイト運営の場合、コピペでいけます！

THEMESにもよりますが、基本作業は同じです。
今回この記事をわざわざ出そうと思ったのは、いくつか理由があります。

・一部スマホでも自動再生できること。
　　15秒~1分程度の動画再生は、下手すると最近の1枚の綺麗な写真データよりも小さかったりします。
　　ブロードバンド化が進み、端末の使い方も多様になるとともにプッシュしても迷惑ではない時代が来ています。
　　とはいえ、選択肢の一つ、という事ですね。
・ミュートは必須だという事。
　　自動再生、とミュートはセット。もちろんそれぞれ外すこともできます。
・自動再生を一斉に止めることもできるということ。
　　さらには、自動再生させたいツールと、させたくないツールが合っても、途中でテンプレートを制御するだけでできます。
　　実はカスタムフィールドテンプレートに、自動再生する、しない、の選択を持ってもいいのかな、とも思っています。
　　が、今回は省略。なぜなら、もし自動再生しなくていいのであれば、YOUTUBEの埋め込みiframeコードを使えば苦労しないからです。
　　わざわざコントロールする価値はないかなぁ、と思いました。

実は、メディアによって、振り分けもできるわけなので、スマホからだと再生せず、パソコンからなら再生する、という分岐を記入してもいいでしょうね。

そこまで書くと複雑かつ選択肢が多くなるので今回はここまで。

おさらいしますが、

◆本日やったこと。
・WORDPRESSで
・YOUTUBE動画を
・音声はミュートして
・自動再生
・a)各ページに違う動画掲載したい　b)宣伝的にどのページにも同じように掲載したい
・サムネイルとは別に書きたい