IE Not Supported
[์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ, CSS] ์œ ํŠœ๋ธŒ ๋“ฑ์˜ ๋น„๋””์˜ค๋ฅผ ๋ฐ˜์‘ํ˜•์œผ๋กœ ๊ฐ์‹ธ๊ธฐ
[์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ, CSS] ์œ ํŠœ๋ธŒ ๋“ฑ์˜ ๋น„๋””์˜ค๋ฅผ ๋ฐ˜์‘ํ˜•์œผ๋กœ ๊ฐ์‹ธ๊ธฐ

์•ž์„œ ์ž‘์„ฑํ•œ ์š”์†Œ๋ฅผ ์ผ์ • ๋น„๋กœ ๊ฐ์‹ธ๊ธฐ์™€ ์œ ํŠœ๋ธŒ ์„ธ๋กœ ์˜์ƒ ํผ์˜ค๊ธฐ๋ฅผ ํ™•์ธํ•˜์‹œ๋ฉด ๋” ๊ฐ„๋‹จํžˆ ์ดํ•ดํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.Github ๋งํฌ ๊ฐ€์žฅ ๊ธฐ๋ณธ์ ์ธ 16:9๋กœ ๊ฐ์‹ธ๋Š” ๊ฑด ์œ ํŠœ๋ธŒ ๋ฟ ์•„๋‹ˆ๋ผ ์นด์นด์˜ค TV, ๋„ค์ด๋ฒ„ TV ๋“ฑ๋„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.ํ•˜์ง€๋งŒ 9:16 ๋น„๋””์˜ค, 4:3 ๋น„๋””์˜ค, 1:1 ๋น„๋””์˜ค ๋“ฑ์€ ์œ ํŠœ๋ธŒ์—์„œ๋ฐ–์— ํ…Œ์ŠคํŠธํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ์ž‘๋™ ํ™•์ธ์€ ์—ฌ๊ธฐ์„œ ํ•˜์‹œ๊ฑฐ๋‚˜ ์•„๋ž˜ ์ด๋ฏธ์ง€ ๋ชฉ๋ก์„ ํŽผ์ณ์ฃผ์„ธ์š”. JS1234567891011121314151617181920$("iframe").each(function() { var a = $(this).attr("width"), b = $(this).attr("height"); if (a / b === 16 / 9) { $(this).wrap("") } if (a / b === 9 / 1..

์œ ํŠœ๋ธŒ ์ธ๋„ค์ผ ์ถ”์ถœํ•˜๊ธฐ
์œ ํŠœ๋ธŒ ์ธ๋„ค์ผ ์ถ”์ถœํ•˜๊ธฐ

์ถ”์ถœ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ์œ ํŠœ๋ธŒ ์ธ๋„ค์ผ์„ ์ž๋™์œผ๋กœ ๊ฐ€์ ธ์˜ค๋Š” ์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋งŒ๋“ค๊ธด ํ–ˆ์ง€๋งŒ, ํฌํ„ธ ์‚ฌ์ดํŠธ ๋“ฑ์—์„œ ์˜์ƒ์„ ๊ฒ€์ƒ‰ํ•˜๋ฉด ์•„๋ฌด๋Ÿฐ ์ด๋ฏธ์ง€๋„ ์—†๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์ด๊ธฐ ๋•Œ๋ฌธ์— ๋งŒ๋“  ์Šคํฌ๋ฆฝํŠธ์ž…๋‹ˆ๋‹ค. https://github.com/marshall-ku/Youtube-Thumbnail-Saver์—๋„ ์ •๋ฆฌํ•ด๋†จ์Šต๋‹ˆ๋‹ค. ์‚ฌ์šฉ ๋ฐฉ๋ฒ• ์ถ”์ถœํ•˜๊ณ  ์‹ถ์€ ์˜์ƒ์˜ ์ฃผ์†Œ๋‚˜, '๊ณต์œ '๋ฅผ ๋ˆŒ๋Ÿฌ ๋‚˜์˜ค๋Š” ์ฃผ์†Œ๋ฅผ ๋ณต์‚ฌํ•ฉ๋‹ˆ๋‹ค. '์ถ”์ถœ'๋ฒ„ํŠผ์„ ํด๋ฆญํ•œ ํ›„ ๋‚ด๋ ค๋ฐ›๊ธฐ๋ฅผ ํด๋ฆญํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฏธ์ง€๋ฅผ ๋‹ค๋ฅธ ์ด๋ฆ„์œผ๋กœ ์ €์žฅํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

์œ ํŠœ๋ธŒ ํŒ์—… ๋ ˆ์ด์–ด ๋งŒ๋“ค๊ธฐ
์œ ํŠœ๋ธŒ ํŒ์—… ๋ ˆ์ด์–ด ๋งŒ๋“ค๊ธฐ

.popupVideo๋ž€ div ์•„๋ž˜์˜ a ํƒœ๊ทธ๋ฅผ ํด๋ฆญํ•˜๋ฉด ์œ ํŠœ๋ธŒ ๋น„๋””์˜ค๋ฅผ ๋ ˆ์ด์–ด๋กœ ๋„์›Œ ์ฃผ๋ฉด์„œ ์˜์ƒ์„ ์žฌ์ƒํ•ฉ๋‹ˆ๋‹ค. (PC) ํ™”๋ฉด์˜ ๋นˆ ๊ณณ์„ ๋ˆ„๋ฅด๋ฉด ํŒ์—… ๋ ˆ์ด์–ด๊ฐ€ ์‚ฌ๋ผ์ง€๋ฉด์„œ ์œ ํŠœ๋ธŒ ์˜์ƒ์ด ์ •์ง€๋ฉ๋‹ˆ๋‹ค. a ํƒœ๊ทธ ์•ˆ์— ๋“ค์–ด๊ฐ„ ๋‚ด์šฉ์€ ์œ ํŠœ๋ธŒ ๋“ค์–ด๊ฐ€์…”์„œ ์•„๋ฌด ์˜์ƒ์ด๋‚˜ ํด๋ฆญํ•˜์‹œ๋ฉด https://www.youtube.com/watch?v=ZBCGkpJWjVc ๊ฐ™์€ ํ˜•์‹์œผ๋กœ ์ฃผ์†Œ์ฐฝ์— ํ‘œ์‹œ๋  ๊ฒ๋‹ˆ๋‹ค. ?v= ๋’ค์˜ ๋‚ด์šฉ์ด ๋น„๋””์˜ค์˜ id์ž…๋‹ˆ๋‹ค. ํ•ด๋‹น ๋‚ด์šฉ ๋ณต์‚ฌํ•ด์„œ ๋ถ™์ด์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค. '๊ณต์œ '๋ฒ„ํŠผ ํด๋ฆญํ•˜์‹œ๋ฉด youtu.be/ ๋’ค์— ๋‚˜์˜ค๋Š” ๋‚ด์šฉ๋„ ๋˜‘๊ฐ™์ด ๋น„๋””์˜ค์˜ id์ž…๋‹ˆ๋‹ค. ๋ฐ๋ชจ 1๋ฒˆ ์˜์ƒ 2๋ฒˆ ์˜์ƒ HTML 1234567 1๋ฒˆ ์˜์ƒ 2๋ฒˆ ์˜์ƒ Colored by Color Scriptercs CSS 123456789101112..

์œ ํŠœ๋ธŒ ์„ธ๋กœ ์˜์ƒ ํผ์˜ค๊ธฐ
์œ ํŠœ๋ธŒ ์„ธ๋กœ ์˜์ƒ ํผ์˜ค๊ธฐ

์œ ํŠœ๋ธŒ์— ๋ชจ๋‹ˆํ„ฐ์˜ ์‚ฌ์ด์ฆˆ๊ฐ€ ์•„๋‹Œ ํœด๋Œ€ํฐ์˜ ์‚ฌ์ด์ฆˆ์— ์ตœ์ ํ™”๋˜์–ด ์˜ฌ๋ผ์˜ค๋Š” ์˜์ƒ์˜ ์ˆ˜๋Š” ๋‚ ์ด ๊ฐˆ์ˆ˜๋ก ๋Š˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ์•„์ง๋„ ์œ ํŠœ๋ธŒ์˜ 'ํผ๊ฐ€๊ธฐ(embed)' ๊ธฐ๋Šฅ์€ ๊ฑฐ์˜ ๋ชจ๋“  ๋น„๋””์˜ค๋ฅผ ๊ฐ€๋กœ 560, ์„ธ๋กœ 315์— ๋งž์ถฐ์„œ ํผ์˜ค๋„๋ก ์ž๋™์œผ๋กœ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. iframe์„ ์กฐ๊ธˆ๋งŒ ์ˆ˜์ •ํ•˜๋ฉด ์„ธ๋กœ ๋น„๋””์˜ค๋กœ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ์‹œ HTML1cs ๊ฐ„๋‹จํ•˜๊ฒŒ width์™€ height๋งŒ ๋ณ€๊ฒฝํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. ์›๋ณธ์—์„œ ์“ฐ๋Š” 560 * 315 ๋ฅผ ๋’ค์ง‘์–ด์„œ 315 * 560์œผ๋กœ ๋ฐ”๊ฟ”๋„ ๋‹น์—ฐํžˆ ๋ฉ๋‹ˆ๋‹ค. ๋„ˆ๋น„ / ๋†’์ด = 0.5625๋งŒ ๋˜๊ฒŒ ํ•ด์ฃผ์„ธ์š”. ๋‹น์—ฐํ•˜์ง€๋งŒ, ์˜ˆ์ „์— ์†Œ๊ฐœํ•ด ๋“œ๋ ธ๋˜ ๋ฐ˜์‘ํ˜•์œผ๋กœ iframe ๊ฐ์‹ธ๋Š” ๋ฐฉ๋ฒ•์„ ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ์™€ ํ•จ๊ป˜ ์ด์šฉํ•˜์‹œ๋ฉด ์ ์ ˆํ•˜๊ฒŒ ๋ฐ˜์‘ํ˜•์œผ๋กœ ํ‘œ์‹œํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์œ ํŠœ๋ธŒ ์˜์ƒ ์ž„๋ฒ ๋“œ ํŒ๋“ค
์œ ํŠœ๋ธŒ ์˜์ƒ ์ž„๋ฒ ๋“œ ํŒ๋“ค

1cs ๊ฐ€์žฅ ๋‹จ์ˆœํžˆ ์œ ํŠœ๋ธŒ ์˜์ƒ์„ ๋ถˆ๋Ÿฌ์˜ค๋Š” ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค. ๊ณต์œ  > ํผ๊ฐ€๊ธฐ > ์†Œ์Šค์ฝ”๋“œ ๋ณต์‚ฌ๋ผ๋Š” ๊ฐ„๋‹จํ•œ ๋ฐฉ์‹์œผ๋กœ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค๋งŒ, ์•„๋ฌด๋ž˜๋„ ๊น”๋”ํ•จ์€ ์กฐ๊ธˆ ๋–จ์–ด์ง‘๋‹ˆ๋‹ค. ์งค๋ง‰ํ•œ ํŒ๋“ค ๋ช‡ ๊ฐ€์ง€๋กœ ์กฐ๊ธˆ ๋” ๊น”๋”ํ•˜๊ฒŒ ์œ ํŠœ๋ธŒ ์˜์ƒ์„ ๋ถˆ๋Ÿฌ์˜ค๋Š” ๋ฐฉ๋ฒ•์„ ์†Œ๊ฐœํ•ด๋ณผ๊นŒ ํ•ฉ๋‹ˆ๋‹ค. ๋ผ์ด๋ธŒ ๋ฐ๋ชจ ์˜์ƒ์„ ํด๋ฆญํ•˜๋ฉด ์Œ์†Œ๊ฑฐ/ํ•ด์ œ ๊ฐ€ ๋ฐ˜๋ณต๋ฉ๋‹ˆ๋‹ค. ์‹œ์ž‘ํ•˜๊ธฐ ์ „ 1cs ํ›„์ˆ ํ•  ๋‚ด์šฉ์€ ์œ„ ์Šคํฌ๋ฆฝํŠธ๊ฐ€ ์žˆ์–ด์•ผ ์ œ๋Œ€๋กœ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค. ์ž„๋ฒ ๋“œํ•œ ์˜์ƒ์„ ๊ฐ•์ œ๋กœ ํ™”๋ฉด์— ๋งž์ถ”๊ธฐ123456789101112131415161718192021.videoWrapper { position: fixed; top: 0; bottom: 0; left: 0; right: 0;} @media (min-aspect-ratio: 16/9) { .videoWrapper { height: 3..

1
์Šคํ‚จ/์Šคํ‚จ ๋ชฉ๋ก
์žก๋‹ด
๊ฐค๋Ÿฌ๋ฆฌ