サイトに埋め込んだYoutubeの動画をリンクタグで途中から再生させる方法です。
例えば以下のように
->23秒から再生
->1分20秒から再生
->2分34秒から再生
Youtube動画の埋め込みタグを取得
１．Youtubeで動画を開きます。
２．動画画面下にある「共有」ボタン、「埋め込み」ボタンの順にクリックして、表示されたiframe タグをコピーします。
３．コピーしたiframe タグを掲載したい編集中のソースコードに貼り付けます。
<iframe width="560" height="315" src="https://www.youtube.com/embed/RwIJL6q-R08" frameborder="0" allowfullscreen></iframe>
iframeタグにname属性を追加します。
<iframe name="player" width="560" height="315" src="https://www.youtube.com/embed/RwIJL6q-R08" frameborder="0" allowfullscreen></iframe>
リンクタグのtarget属性を指定したiframeのnameに設定
<a href="href="https://www.youtube.com/embed/RwIJL6q-R08" target="player">1分30秒から再生</a>
リンクタグのsrcに自動再生と再生開始時間を指定するコードを追加
<a href="href="https://www.youtube.com/embed/RwIJL6q-R08?autoplay=1&start=90" target="player">1分30秒から再生</a>
※90は秒数です。
以上で完成ですが、
ページ内で、リンクタグと動画が離れた位置にあり、リンクをクリックした際に、動画の位置まで移動させたい場合は、ページをスクロールするjavascriptのコードを追加します。
追加するjavascriptコード
<script type="text/javascript" language="javascript">
<!--
function scroll(){
window.scrollTo(0,50);
}
// -->
</script>
※4行目の
"window.scrollTo(x,y)"
のxとyには、ページ左隅からのx座標、y座標の数値をピクセル単位で入力します。
onclick属性をリンクタグ内に追加し、リンクをクリックした際に実行させます。
<a href="https://www.youtube.com/embed/RwIJL6q-R08?autoplay=1&start=138" target="sample" onclick="scroll()">2分18秒から再生</a>
->2分18秒から再生
以上です。