YouTube 動画埋ã‚è¾¼ã¿ã®ãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ–対応方法 - by Takumi HirashimaYouTube å‹•ç”»ã®åŸ‹ã‚è¾¼ã¿ã‚’レスãƒãƒ³ã‚·ãƒ–対応ã™ã‚‹æ–¹æ³•ã‚’紹介ã—ã¾ã™ã€‚ 埋ã‚è¾¼ã¿ã‚³ãƒ¼ãƒ‰ã‚’ブãƒãƒƒã‚¯è¦ç´ ã§å›²ã¿ã€CSS ã® aspect-ratio プãƒãƒ‘ティを使ã„ã€ã‚¢ã‚¹ãƒšã‚¯ãƒˆæ¯”ã‚’ 16:9 ã«å›ºå®šã™ã‚‹ã“ã¨ã§å¯¾å¿œã—ã¾ã™ã€‚縦型動画ã®å ´åˆã¯ã‚¢ã‚¹ãƒšã‚¯ãƒˆæ¯”ã‚’ä»»æ„ã®å€¤ã«å¤‰æ›´ã—ã¦ãã ã•ã„。 ã¾ãŸã€å¤ã„ブラウザーã§ã‚‚対応ã§ãã‚‹ padding-top ãƒãƒƒã‚¯ã‚’使ã£ãŸæ–¹æ³•ã‚‚紹介ã—ã¾ã™ã€‚ å‹•ç”»ã®åŸ‹ã‚è¾¼ã¿ã‚’レスãƒãƒ³ã‚·ãƒ–対応ã™ã‚‹æ–¹æ³• aspect-ratio を使ã£ãŸæ–¹æ³• padding-top ãƒãƒƒã‚¯ã‚’使ã£ãŸæ–¹æ³• å‹•ç”»ã®åŸ‹ã‚è¾¼ã¿ã‚’レスãƒãƒ³ã‚·ãƒ–対応ã™ã‚‹æ–¹æ³• ã¾ãšã¯ YouTube ã‹ã‚‰ã‚³ãƒ”ーã—ãŸã€Œå‹•ç”»ã®åŸ‹ã‚è¾¼ã¿ã®ã‚³ãƒ¼ãƒ‰ï¼ˆiframe）ã€ã‚’ブãƒãƒƒã‚¯è¦ç´ （<div class="youtube">〜</div>）ã§å›²ã¿ã¾ã™ã€‚ <div class="youtube"> <iframe width="560" heig
安全ãªã‚¦ã‚§ãƒ–サイトã®ä½œã‚Šæ–¹ - 1.9 クリックジャッã‚ング | æƒ…å ±ã‚»ã‚ュリティ | IPA 独立行政法人 æƒ…å ±å‡¦ç†æŽ¨é€²æ©Ÿæ§‹
X-Frame-Options ã«ã¤ã„ã¦ç°¡å˜ã«èª¿ã¹ã¦ã¿ãŸ - Qiita
{{#tags}}- {{label}}
{{/tags}}