ryoakg
1/29/2017 - 2:52 AM

embeding-youtube-videos.html

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <title>YouTube</title>
    <style>
     .video-list{
       list-style:none;
     }
     .video-item{
       display: inline-block;
       vertical-align: top;
       margin-bottom: 10px;
       boxs-izing: border-box;
       width:300px;
     }
     .video{
       display:block;
       /* html が見難くなるので css で指定しておく
          width だけ指定すると なぜか 300x150 になった */
       width:300px;
       height:169px;
     }
    </style>
  </head>
  <body>
    see also
    <ul>
      <li><a href="https://developers.google.com/youtube/player_parameters">YouTube IFrame Player API</a></li>
      <li><a href="https://developer.mozilla.org/docs/Web/HTML/Element/iframe#Attributes">iframe attributes</a></li>
    </ul>

    playing
    <ul class="video-list">
      <li class="video-item">
        <iframe class="video" src="https://www.youtube.com/embed/Na3ag7jkcR0?rel=0&autoplay=1"></iframe>
        autoplay=1
      </li>

      <li class="video-item">
        <iframe class="video" src="https://www.youtube.com/embed/Na3ag7jkcR0?rel=0&autoplay=1&loop=1&playlist=Na3ag7jkcR0"></iframe>
        autoplay=1, loop=1, playlist=...<br />
        loop forever
      </li>

      <li class="video-item">
        <iframe class="video" src="https://www.youtube.com/embed/Na3ag7jkcR0?rel=0"></iframe>
        rel=0
        without suggesting relative videos at the end of the video
      </li>
    </ul>

    <!-- list
         <ul class="video-list">
         <li class="video-item">
         <iframe class="video" src="https://www.youtube.com/embed/Na3ag7jkcR0?loop=1"></iframe>
         loop=1
         </li>
         </ul>
       -->

    widgets &amp; controls
    <ul class="video-list">
      <li class="video-item">
        <iframe class="video" src="https://www.youtube.com/embed/Na3ag7jkcR0?controls=0"></iframe>
        controls=0
      </li>

      <li class="video-item">
        <iframe class="video" src="https://www.youtube.com/embed/Na3ag7jkcR0?showinfo=0"></iframe>
        showinfo=0
      </li>

      <li class="video-item">
        <iframe class="video" src="https://www.youtube.com/embed/Na3ag7jkcR0?modestbranding=1"></iframe>
        modestbranding=1<br />
        Don't show YouTube logo.
      </li>

      <li class="video-item">
        <iframe class="video" src="https://www.youtube.com/embed/Na3ag7jkcR0?disablekb=1"></iframe>
        disablekb=1<br />
        disable keyboard
        <ul>
          <li>space: play/pause</li>
          <li>←,→: backward,forward</li>
          <li>↑,↓: volume</li>
        </ul>
      </li>
    </ul>

    language
    <ul class="video-list">
      <li class="video-item">
        <iframe class="video" src="https://www.youtube.com/embed/Na3ag7jkcR0?cc_lang_pref=en&cc_load_policy=1"></iframe>
        closed caption
      </li>
      <li class="video-item">
        <iframe class="video" src="https://www.youtube.com/embed/Na3ag7jkcR0?hl=fr"></iframe>
        hl=fr
      </li>
    </ul>


    time
    <ul class="video-list">
      <li class="video-item">
        <iframe class="video" src="https://www.youtube.com/embed/Na3ag7jkcR0?start=20"></iframe>
        starts from 0:20s
      </li>

      <li class="video-item">
        <iframe class="video" src="https://www.youtube.com/embed/Na3ag7jkcR0?end=5"></iframe>
        ends at 0:5s
      </li>
    </ul>

    appearance
    <ul class="video-list">
      <li class="video-item">
        <iframe class="video" src="https://www.youtube.com/embed/Na3ag7jkcR0?theme=dark&color=red"></iframe>
        theme=dark, color=red(default)
      </li>

      <li class="video-item">
        <iframe class="video" src="https://www.youtube.com/embed/Na3ag7jkcR0?theme=dark&color=white"></iframe>
        theme=dark, color=white
      </li>

      <li class="video-item">
        <iframe class="video" src="https://www.youtube.com/embed/Na3ag7jkcR0?theme=light&color=red"></iframe>
        theme=light, color=red
      </li>

      <li class="video-item">
        <iframe class="video" src="https://www.youtube.com/embed/Na3ag7jkcR0?theme=light&color=white"></iframe>
        theme=light, color=red
      </li>
    </ul>
  </body>
</html>