Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

            
              <!DOCTYPE html>
<html>
    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script> 

    <body>

          
        <!-- YouTubeプレイヤーのプレースホルダ -->
	    <div id="player"></div>
        
        <div ng-app="movieListApp">
        
            <div id = "movieListCtrlID" ng-controller="movieListController">
      
                <select id="movieList" ng-model="movie" ng-options="movie.movieTitle for movie in movies" ng-change="onSelectChange()" style="position: absolute; left: 5px; top: 250px">
                </select>                
                
                <br>
                             
                <button id="previousBtn" ng-click="previous()" style="position: absolute; left: 5px; top: 290px">Previous</button>  
                <button id="forwardBtn" ng-click="forward()" style="position: absolute; left: 130px; top: 290px">Forward</button>  
                <button id="sizeBtn" ng-click="changePlayerSize()"  style="position: absolute; left: 290px; top: 290px">Size</button>

                <br>
                             
                <button id="defaultMVListBtn" ng-click="defaultMVList()" style="position: absolute; left: 5px; top: 330px">DefaultMVList</button>  
                <button id="shuffleMVListBtn" ng-click="shuffleMVList()" style="position: absolute; left: 200px; top: 330px">ShuffleMVList</button>  
                               
                <br>
                
                <form name="txtForm">
                    <button id="repeatStateSetBtn" ng-click="setRepeatState()" style="position: absolute; left: 5px; top: 370px">Repeat</button>
                    <input  id="repeatStateDispTxt" type="text" name="repeatState" size="11" maxlength="10" value="REPEAT OFF" readonly="readonly" style="position: absolute; left: 130px; top: 370px"> 
                </form>
                <br>
                
                <a href="http://www.amazon.co.jp/gp/search?ie=UTF8&keywords=情報セキュリティ&tag=myinteresting-22&index=aps&linkCode=ur2&camp=247&creative=1211"  id="amazonBtn" rel="nofollow" target="_blank" style="position: absolute; left: 5px; top: 410px">Amazon</a>
                <a href="http://twitter.com/share?url=http://jsdo.it/siouxcitizen/8WtE&amp;text=勉強用に京都大学の情報セキュリティ講義の動画リストを連続再生"  id="twitterBtn" rel="nofollow" target="_blank" style="position: absolute; left: 130px; top: 410px">Twitter</a>
                <a href="http://www.facebook.com/sharer.php?u=http://jsdo.it/siouxcitizen/8WtE" id="facebookBtn" rel="nofollow" target="_blank" style="position: absolute; left: 245px; top: 410px">Facebook</a>
        
            </div>
            
        </div>
        
    </body>
    
</html>
            
          
!

CSS

            
              * {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  padding: 10px;
  background: #5088ff;
  font: 1.0em sans-serif;
  font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;  
}

select {
    font: 1.0em sans-serif;
    font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
    background-color: #fff;
    color: #333333;
    letter-spacing: 0.1em;
    border: 1px solid #fff;
    display: inline-block;
    padding: 5px 15px;
    border-radius: 25px;
    transition: all 0.15s ease;
    margin-bottom: 0.5em;

}

a {
    background-color: #4099FF;
    color: #fff;
    letter-spacing: 0.1em;
    border: 1px solid #fff;
    display: inline-block;
    padding: 5px 15px;
    border-radius: 25px;
    transition: all 0.15s ease;
    margin-bottom: 2em;
    text-decoration: none;
    font-style: none;
}

a:hover {
  background-color: #fff;
  color: #7f8c8d;
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
}

button {
    font: 1.0em sans-serif;
    font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
    background-color: #3B5998;
    color: #fff;
    letter-spacing: 0.1em;
    border: 1px solid #fff;
    display: inline-block;
    padding: 5px 15px;
    border-radius: 25px;
    transition: all 0.15s ease;
    margin-bottom: 0.5em;

}


button:hover {
  background-color: #fff;
  color: #7f8c8d;
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
}

input[type="text"] {
    font: 1.0em sans-serif;
    font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
    background-color: #fff;
    color: #333333;
    letter-spacing: 0.1em;
    border: 1px solid #fff;
    display: inline-block;
    padding: 5px 15px;
    transition: all 0.15s ease;
    margin-bottom: 0.5em;
}

            
          
!

JS

            
              // forked from siouxcitizen's "[シャッフル機能付き] 作業用に自分の田舎(兵庫県豊岡市)の動画リストを連続再生(長い動画メイン別Ver.)" http://jsdo.it/siouxcitizen/uqRN
//
//Youtube動画再生の機能に動画再生の順番をシャッフルする機能を追加してみました。
//
//[ShuffleMVList]ボタンで再生動画の順番をシャッフルします
//[DefaultMVList]ボタンでデフォルトの動画再生の順番にもどします
//
//*注
//なぜかセーブするときにHTMLエディタの先頭を1段落落とさないとCSSがうまく機能しないです

//動画プレイヤー
var player = null;
//動画プレイヤー用パラメータ
var options =
    {
        width: 352,              //下部AngularJS部分に記述された動画プレイヤーサイズ配列($scope.sizes)の先頭にあるwidthをセット
        height: 230,             //下部AngularJS部分に記述された動画プレイヤーサイズ配列($scope.sizes)の先頭にあるheightをセット
        videoId: "QC2MPlP10ZU",  //下部AngularJS部分に記述された動画ID配列($scope.movies)の先頭にある動画IDをセット
        playerVars: {
            autoplay: 1,
            controls: 1,
            autohide: 1,
            html5: 1
        },
        events: {
            onReady: onPlayerReady,
            onStateChange: onPlayerStateChange
        }
    };

//iframe apiの読込 
//iframe apiの読込完了時に onYouTubeIframeAPIReady が呼び出されて 動画Player設定→動画再生処理開始
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

//iframe apiの読込完了時に呼び出される
//Youtube Playerのパラメータ設定や、イベント処理の設定を行う
function onYouTubeIframeAPIReady() {
    
    player = new YT.Player( 'player', options );
    
}

//Youtube Playerの準備ができたら(読込完了したら?)動画再生を開始
function onPlayerReady(event) {
    //event.target.playVideo();
    player.playVideo();
}

//動画の再生が終了したら、動画IDリストから次の動画のIDを取得して再生する
function onPlayerStateChange(event) {
    
    if(event.data == YT.PlayerState.ENDED) {

        //angularJSの関数を呼び出す
        var scope = angular.element(document.getElementById("movieListCtrlID")).scope();
        
        scope.$apply(function () {
            scope.playNextMovie();
        });
  
    }          
}

angular.module('movieListApp', [])
.controller('movieListController', function ($scope) {
    //動画IDの配列参照用のインデックス   
    $scope.index = 0;
    $scope.isRepeat = false;
    $scope.size = 0; // 画面サイズ 0 ~ 3 

    //Youtubeプレイヤーのサイズとそれに対応したボタン位置設定を保持する配列
    $scope.sizes = [
        {"sizeIndex": 0, "height": 230, "width": 352, 
         "movieListLeft": "5px", "movieListTop": "250px", "sizeBtnLeft": "290px", "sizeBtnTop": "290px",
         "previousBtnLeft": "5px", "previousBtnTop": "290px", "forwardBtnLeft": "130px", "forwardBtnTop": "290px",
         "defaultMVListBtnLeft": "5px", "defaultMVListBtnTop": "330px", "shuffleMVListBtnLeft": "200px", "shuffleMVListBtnTop": "330px",
         "repeatStateSetBtnLeft": "5px", "repeatStateSetBtnTop": "370px", "repeatStateDispTxtLeft": "130px", "repeatStateDispTxtTop": "370px",
         "amazonBtnLeft": "5px", "amazonBtnTop": "410px", "twitterBtnLeft": "130px", "twitterBtnTop": "410px", "facebookBtnLeft": "245px", "facebookBtnTop": "410px"},
        
        {"sizeIndex": 1, "height": 288, "width": 512, 
         "movieListLeft": "5px", "movieListTop": "308px", "sizeBtnLeft": "290px", "sizeBtnTop": "348px",
         "previousBtnLeft": "5px", "previousBtnTop": "348px", "forwardBtnLeft": "130px", "forwardBtnTop": "348px",
         "defaultMVListBtnLeft": "5px", "defaultMVListBtnTop": "388px", "shuffleMVListBtnLeft": "200px", "shuffleMVListBtnTop": "388px",
         "repeatStateSetBtnLeft": "5px", "repeatStateSetBtnTop": "428px", "repeatStateDispTxtLeft": "130px", "repeatStateDispTxtTop": "428px",
         "amazonBtnLeft": "5px", "amazonBtnTop": "468px", "twitterBtnLeft": "130px", "twitterBtnTop": "468px", "facebookBtnLeft": "245px", "facebookBtnTop": "468px"},
        
        {"sizeIndex": 2, "height": 495, "width": 704, 
         "movieListLeft": "740px", "movieListTop": "115px", "sizeBtnLeft": "1030px", "sizeBtnTop": "155px",
         "previousBtnLeft": "740px", "previousBtnTop": "155px", "forwardBtnLeft": "870px", "forwardBtnTop": "155px",
         "defaultMVListBtnLeft": "740px", "defaultMVListBtnTop": "195px", "shuffleMVListBtnLeft": "950px", "shuffleMVListBtnTop": "195px",
         "repeatStateSetBtnLeft": "740px", "repeatStateSetBtnTop": "235px", "repeatStateDispTxtLeft": "870px", "repeatStateDispTxtTop": "235px",
         "amazonBtnLeft": "740px", "amazonBtnTop": "275px", "twitterBtnLeft": "870px", "twitterBtnTop": "275px", "facebookBtnLeft": "985px", "facebookBtnTop": "275px"},
        
        
        {"sizeIndex": 3, "height": 144, "width": 256, 
         "movieListLeft": "5px", "movieListTop": "164px", "sizeBtnLeft": "290px", "sizeBtnTop": "204px",
         "previousBtnLeft": "5px", "previousBtnTop": "204px", "forwardBtnLeft": "130px", "forwardBtnTop": "204px",
         "defaultMVListBtnLeft": "5px", "defaultMVListBtnTop": "244px", "shuffleMVListBtnLeft": "200px", "shuffleMVListBtnTop": "244px",
         "repeatStateSetBtnLeft": "5px", "repeatStateSetBtnTop": "284px", "repeatStateDispTxtLeft": "130px", "repeatStateDispTxtTop": "284px",
         "amazonBtnLeft": "5px", "amazonBtnTop": "324px", "twitterBtnLeft": "130px", "twitterBtnTop": "324px", "facebookBtnLeft": "245px", "facebookBtnTop": "324px"}
        
    ];
    
    $scope.movies = [
        {"movieIndex": 0, "movieID": "QC2MPlP10ZU", "movieTitle": "京都大学「情報セキュリティ」上田浩准教授 4月18日"},
        {"movieIndex": 1, "movieID": "AL1lI6-a3ws", "movieTitle": "京都大学「情報セキュリティ」上田浩准教授 4月25日"},
        {"movieIndex": 2, "movieID": "yzdbpjZ8KVM", "movieTitle": "京都大学「情報セキュリティ」上田浩准教授 5月2日"},
        {"movieIndex": 3, "movieID": "WFC8Bos3itw", "movieTitle": "京都大学「情報セキュリティ」上田浩准教授 5月9日"},
        {"movieIndex": 4, "movieID": "5cT0MqyJvKE", "movieTitle": "京都大学「情報セキュリティ」上田浩准教授 5月16日"},
        {"movieIndex": 5, "movieID": "ESwAUF7SjW8", "movieTitle": "京都大学「情報セキュリティ」上田浩准教授 5月23日"},
        {"movieIndex": 6, "movieID": "nErTOTinTWg", "movieTitle": "京都大学「情報セキュリティ」上田浩准教授 6月6日"},
        {"movieIndex": 7, "movieID": "Bkd0YHK2kl0", "movieTitle": "京都大学「情報セキュリティ」上田浩准教授 6月20日"},
        {"movieIndex": 8, "movieID": "L2E_RF6Z9AU", "movieTitle": "京都大学「情報セキュリティ」上田浩准教授 7月4日"},
        {"movieIndex": 9, "movieID": "UrfkTFdu3T0", "movieTitle": "京都大学「情報セキュリティ」上田浩准教授 7月11日"},
        {"movieIndex": 10, "movieID": "acYiimpOhbQ", "movieTitle": "京都大学「情報セキュリティ」上田浩准教授 7月25日"}
    ];

    $scope.defaultMovies = [
        {"movieIndex": 0, "movieID": "QC2MPlP10ZU", "movieTitle": "京都大学「情報セキュリティ」上田浩准教授 4月18日"},
        {"movieIndex": 1, "movieID": "AL1lI6-a3ws", "movieTitle": "京都大学「情報セキュリティ」上田浩准教授 4月25日"},
        {"movieIndex": 2, "movieID": "yzdbpjZ8KVM", "movieTitle": "京都大学「情報セキュリティ」上田浩准教授 5月2日"},
        {"movieIndex": 3, "movieID": "WFC8Bos3itw", "movieTitle": "京都大学「情報セキュリティ」上田浩准教授 5月9日"},
        {"movieIndex": 4, "movieID": "5cT0MqyJvKE", "movieTitle": "京都大学「情報セキュリティ」上田浩准教授 5月16日"},
        {"movieIndex": 5, "movieID": "ESwAUF7SjW8", "movieTitle": "京都大学「情報セキュリティ」上田浩准教授 5月23日"},
        {"movieIndex": 6, "movieID": "nErTOTinTWg", "movieTitle": "京都大学「情報セキュリティ」上田浩准教授 6月6日"},
        {"movieIndex": 7, "movieID": "Bkd0YHK2kl0", "movieTitle": "京都大学「情報セキュリティ」上田浩准教授 6月20日"},
        {"movieIndex": 8, "movieID": "L2E_RF6Z9AU", "movieTitle": "京都大学「情報セキュリティ」上田浩准教授 7月4日"},
        {"movieIndex": 9, "movieID": "UrfkTFdu3T0", "movieTitle": "京都大学「情報セキュリティ」上田浩准教授 7月11日"},
        {"movieIndex": 10, "movieID": "acYiimpOhbQ", "movieTitle": "京都大学「情報セキュリティ」上田浩准教授 7月25日"}
    ];

    $scope.tempMovies = [
    ];
    $scope.destMovies = [
    ];
    
    $scope.movie = $scope.movies[0];

    $scope.onSelectChange = function() {
        player.loadVideoById($scope.movie.movieID);
        $scope.index = $scope.movie.movieIndex;
        
    };
    
    $scope.previous = function() {
        if ($scope.index - 1 >= 0) {
            //1つ前の動画インデックスに戻す
            $scope.index = $scope.index - 1; 
            //戻したインデックスをもとに動画リストから動画再生
            player.loadVideoById($scope.movies[$scope.index].movieID);
            //戻したインデックスを動画セレクトボックスにも反映
            $scope.movie = $scope.movies[$scope.index];
        //Repeat設定がONの場合は、最初の動画のインデックスから最後の動画のインデックスへ変更してから同じ処理    
        } else if ( ($scope.index - 1) < 0 && $scope.isRepeat) { 
            $scope.index = $scope.movies.length - 1;
            player.loadVideoById($scope.movies[$scope.index].movieID);
            $scope.movie = $scope.movies[$scope.index];
        }
    };
    
    $scope.forward = function() {
        if ($scope.index + 1 < $scope.movies.length) {
            //1つ後の動画インデックスに進める
            $scope.index = $scope.index + 1;
            //進めたインデックスをもとに動画リストから動画再生
            player.loadVideoById($scope.movies[$scope.index].movieID);
            //進めたインデックスを動画セレクトボックスにも反映
            $scope.movie = $scope.movies[$scope.index];
        //Repeat設定がONの場合は、最後の動画のインデックスから最初の動画のインデックスへ変更してから同じ処理        
        } else if ( ( $scope.index + 1 ) == $scope.movies.length && $scope.isRepeat) {
            $scope.index =  0;
            player.loadVideoById($scope.movies[$scope.index].movieID);
            $scope.movie = $scope.movies[$scope.index];
        }
    };

    //再生動画リストをデフォルトのものに設定
    $scope.defaultMVList = function() {
        
        //デフォルトの再生動画リストをセットし、
        //その他項目を初期化してリスト先頭の動画から再生しなおす        
        $scope.movies = $scope.defaultMovies.slice();
        $scope.index = 0;
        $scope.movie = $scope.movies[0];
        player.loadVideoById($scope.movies[$scope.index].movieID)
        
    };
    
    //再生動画リストをシャッフル
    $scope.shuffleMVList = function() {
        
        $scope.tempMovies = $scope.movies.slice();
        $scope.destMovies = [];
        var destIndex = 0;
        
        while($scope.tempMovies.length > 0) {

            var tempIndex = Math.floor(Math.random() * $scope.tempMovies.length);
            
            //alert(tempIndex);
            //alert($scope.tempMovies[tempIndex].movieIndex);
            
            $scope.tempMovies[tempIndex].movieIndex = destIndex;
            
            $scope.destMovies.push($scope.tempMovies[tempIndex]); 
            $scope.tempMovies.splice(tempIndex, 1);
            
            destIndex = destIndex + 1;
        }
        
        //シャフルされた再生動画リストをセットし、
        //その他項目を初期化してリスト先頭の動画から再生しなおす
        $scope.movies = $scope.destMovies;
        $scope.index = 0;
        $scope.movie = $scope.movies[0];
        player.loadVideoById($scope.movies[$scope.index].movieID)
        
    };
    
    //REPEAT設定のON・OFFを行う REPEAT設定は画面のテキストボックスに反映される
    $scope.setRepeatState = function() {
        if($scope.isRepeat) {
            //isRepeat = false;
            $scope.isRepeat = false;
            document.txtForm.repeatState.value = "REPEAT OFF";
        } else {
            //isRepeat = true;
            $scope.isRepeat = true;
            document.txtForm.repeatState.value = "REPEAT ON";
        }
    };

    //REPEAT設定のON・OFFを行う REPEAT設定は画面のテキストボックスに反映される
    $scope.playNextMovie = function() {

        //動画IDリストの最後のIDになるまで動画を再生する
        if ( ($scope.index + 1) < $scope.movies.length) {

            //動画IDリストのインデックスを進める
            $scope.index = $scope.index + 1;

            //画面のSELECTリストに反映させる
            $scope.movie = $scope.movies[$scope.index];

            //動画IDリストより動画IDを指定して動画再生
            player.loadVideoById($scope.movies[$scope.index].movieID);

        //REPEAT ON の場合に動画IDリスト最後の動画が終了した場合は
        //動画IDリストの最初のIDに戻って動画を再生する    
        } else if ( ($scope.index + 1) ==$scope.movies.length && $scope.isRepeat) {

            $scope.index = 0;

            //画面のSELECTリストに反映させる;
            $scope.movie = $scope.movies[$scope.index];

            //動画IDリストより動画IDを指定して動画再生
            player.loadVideoById($scope.movies[$scope.index].movieID);

        } 

    };


    //YoutubePlayerのサイズを変更する
    $scope.changePlayerSize = function() {

        $scope.size = $scope.size + 1;
        //サイズ保持配列からYoutubePlayerのサイズを取得して変更する
        if ($scope.size < $scope.sizes.length) {
            player.setSize($scope.sizes[$scope.size].width, $scope.sizes[$scope.size].height);
            

            
        } else {
            $scope.size = 0;
            player.setSize($scope.sizes[$scope.size].width, $scope.sizes[$scope.size].height);
            
        }
        //ボタンの座標を設定
	    var element = document.getElementById("movieList"); 
	    //element.style.position = 'absolute'; 
	    element.style.left = $scope.sizes[$scope.size].movieListLeft; 
	    element.style.top  = $scope.sizes[$scope.size].movieListTop; 
	                
	    element = document.getElementById("sizeBtn"); 
	    //element.style.position = 'absolute'; 
	    element.style.left = $scope.sizes[$scope.size].sizeBtnLeft; 
	    element.style.top  = $scope.sizes[$scope.size].sizeBtnTop; 
	    
	    element = document.getElementById("previousBtn"); 
	    //element.style.position = 'absolute'; 
	    element.style.left = $scope.sizes[$scope.size].previousBtnLeft; 
	    element.style.top  = $scope.sizes[$scope.size].previousBtnTop;
	    
	    element = document.getElementById("forwardBtn"); 
	    //element.style.position = 'absolute'; 
	    element.style.left = $scope.sizes[$scope.size].forwardBtnLeft; 
	    element.style.top  = $scope.sizes[$scope.size].forwardBtnTop;

	    element = document.getElementById("defaultMVListBtn"); 
	    //element.style.position = 'absolute'; 
	    element.style.left = $scope.sizes[$scope.size].defaultMVListBtnLeft; 
	    element.style.top  = $scope.sizes[$scope.size].defaultMVListBtnTop;
	    
	    element = document.getElementById("shuffleMVListBtn"); 
	    //element.style.position = 'absolute'; 
	    element.style.left = $scope.sizes[$scope.size].shuffleMVListBtnLeft; 
	    element.style.top  = $scope.sizes[$scope.size].shuffleMVListBtnTop;
	    
	    element = document.getElementById("repeatStateSetBtn"); 
	    //element.style.position = 'absolute'; 
	    element.style.left = $scope.sizes[$scope.size].repeatStateSetBtnLeft; 
	    element.style.top  = $scope.sizes[$scope.size].repeatStateSetBtnTop;
	    
	    element = document.getElementById("repeatStateDispTxt"); 
	    //element.style.position = 'absolute'; 
	    element.style.left = $scope.sizes[$scope.size].repeatStateDispTxtLeft; 
	    element.style.top  = $scope.sizes[$scope.size].repeatStateDispTxtTop;

	    element = document.getElementById("amazonBtn"); 
	    //element.style.position = 'absolute'; 
	    element.style.left = $scope.sizes[$scope.size].amazonBtnLeft; 
	    element.style.top  = $scope.sizes[$scope.size].amazonBtnTop;
	    
	    element = document.getElementById("twitterBtn"); 
	    //element.style.position = 'absolute'; 
	    element.style.left = $scope.sizes[$scope.size].twitterBtnLeft; 
	    element.style.top  = $scope.sizes[$scope.size].twitterBtnTop;

	    element = document.getElementById("facebookBtn"); 
	    //element.style.position = 'absolute'; 
	    element.style.left = $scope.sizes[$scope.size].facebookBtnLeft; 
	    element.style.top  = $scope.sizes[$scope.size].facebookBtnTop;

    };
    
});

            
          
!
999px

Console