HTML

HTML tips.

ボタンを中央寄せする方法

• stackoverflow: trying to align html button at the center of the my page [duplicate]

ボタンをブロック要素に変換して margin: auto; を設定する．

• HTML

<div>
  <button>Submit</button>
</div>

• CSS

button {
  margin: auto;
  display: block;
}

iframe で Youtube を埋め込む方法

• stackoverflow: embed youtube video - Refused to display in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN' [duplicate]
• stackoverflow: Unable to play YouTube videos on embed

Youtube の動画リンクを以下のように書き換える．

• watch?v=[video-id] を
• embed/[video-id] に書き変える

- <iframe src="https://www.youtube.com/watch?v=-NoHOI35TyY"></iframe>
<!-- 書き換え後 -->
+ <iframe src="https://www.youtube.com/embed/-NoHOI35TyY"></iframe>

• 注意点
  • watch~~~ のままだと www.youtube.com refused to connect というエラーが出て表示されない．また，
  • embed?v=[video-id] のように watch のみを修正するだけだと，埋め込みはできるが埋め込み後に再生できないという状態になる．