Youtube シアターモード CSS

youtubeのシアターモードっぽいスタイルの実装です。

個別投稿ページでご覧ください。

Theater Mode

HTML

<span class="switch" tabindex="0">Theater Mode</span>

<div class="button">
 <input type="checkbox" name="morphing_check" value="morphing" id="morphing_check">
 <label for="morphing_check">シアターモード</label>
 <div class="theater">
 
</div> </div>

CSS

.theater{
 margin-top:2em;
 transition: all 1s ease-in-out;
}
.button input[type="checkbox"]:checked ~.theater{
 margin:2em -50%;
 padding:10px 50%;
 background:rgba(0,0,0,1);
 text-align:center;
 transition: all 1s ease-in-out;
}
.button label{
 padding:.3em;
 border:1px solid #ccc;
 background:#ddd;
}
.button input[type="checkbox"]{
 visibility:hidden;
}
.button label:before{
 margin:-3px 10px 0 0;
 content:" ";
 display:inline-block;
 width:13px;
 height:13px;
 background:url( http://tenman.info/labo/css/files/del.png );
 background-size:contain;
 vertical-align:middle;
 background-repeat:no-repeat;
 transition: all 1s ease-in-out;
}
.button input[type="checkbox"]:checked ~ label:before{
 margin:-3px 10px 0 0;
 content:" ";
 display:inline-block;
 width:13px;
 height:13px;
 background:url( http://tenman.info/labo/css/files/checked.png );
 background-size:contain;
 vertical-align:middle;
 background-repeat:no-repeat;
 transition: all 1s ease-in-out;
}

フィルターを使うと、再生方法が変更できます

Oembed Youtube 再生方法の変更


新着記事

コメントは受け付けていません。