【ibisPaint】アイコンリング 作り方01Youtube動画にリンクを埋め込み表示する方法HTML&CSS【レスポンシブ対応】
<h3 id="01"style=" position: relative;
padding: 0.2em 0.5em; background: -webkit-linear-gradient(to right, rgb(255, 124, 111), #ffc994); background: linear-gradient(to right, rgb(255, 124, 111), #ffc994); color: white; font-weight: lighter; box-shadow: 0 0 4px rgba(0, 0, 0, 0.56);">【ibisPaint】アイコンリング 作り方01</h3> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1"> <style> body{ margin:0; } .ttt2{ position:relative; top:0px; background:rgba(0,0,0,0.8); padding:15px 5px; text-align:center; z-index:99999999; } .ttt2 a,.ttt2 a:link,.ttt2 a:visited{ color:#FFFFFF; text-decoration:none; } .ttt2 a:hover{ color:#ffd24d; } .mga_movie-wrap { position: relative; padding-bottom: 48.25%; height: 0; overflow: hidden; } .mga_movie-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .mga_movie-wrap img{ max-width:88%; } .ttt2 p{ margin:0; } .mga_movie-wrap .ttt2 iframe { width: 90%; } </style> <script> $(function() { $('button').click(function(){ $('.ttt2').hide(); }); }); </script> </head> <body> <div class="mga_movie-wrap"> <div class="ttt2"><button style="float:right;">x</button><p><a href="/* link先URL */" target="_blank">/* link先タイトル */</a></p></div> <div class="movie-wrap"><div class="movie-wrap">/* 埋め込みYoutube＜iframe～ */<iframe width="560" height="315" src="https://www.youtube.com/embed/-iWRwPIDnJc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>/* 埋め込みYoutube＜iframe～まで＞ */</div> </div> </body> <style type="text/css">/* YouTube動画レシポンシブ */ .movie-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .mga_movie-wrap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } </style> |
RSSフィード
