( *예전에 저장해놓았던 글인데.. 글을 쓸려고 하다보니까 지우기는 아까워서.. )

이 글의 결론: 

한마디로

(3. 유튜브 라이브의 영상주소)에 대응을 하지 못한다는것.. 

-------------------------------------------------------------------

본문 시작!

작년인가 부터

유튜브는 동영상, 쇼츠, 실시간, 이렇게 3가지로 분류하기 시작했는데.. 

공유버튼을 눌러서 주소를 복사하면 복사되는 주소 체계는 다음과 같다. 

동영상

쇼츠

실시간

다시말해 

shorts / 동영상 / 실시간 에서 공유버튼을 눌러 복사 할 수 있는 주소의 형태는 아래와 같다.

1번 동영상 / 2번 shorts / 3번 실시간

1,2,3번 모두 영상 고유주소만 있으면 영상을 접근 할 수 있지만..((영상고유주소)가 같으면 주소의 형태를 바꿔도 재생이 가능하다.)

의도는 모르겠지만 유튜브는 저 3가지를 다른 형태로 만들어놨음(추후에 업데이트가 될런지는 모르겠지만.. )

유튜브는 사용상에 문제가 없음..

근데 저 주소를 복사해서 커뮤니티에 옮기는상황에서 문제가 발생한다.. 

(유튜브가 바뀌면간단한데.. ㅠ.ㅠ 유튜브의 귀차니즘 덕분에 전세계가 고통받네.. ㅠ.ㅠ)

1번과 2번의 경우는 꽤나 오래전부터 써와서.. 게시판에 링크를 복사 붙여 넣기를 하면 유튜브영상으로 인식 하기 때문에 문제가 없음.. 

문제는 3번

문제는 3번과 같은 주소의 형태 

유튜브에서 실시간 탭에 올라가는 영상들에서 공유하기 버튼을 누르면 3번과 같은  주소의 형태로 복사가 되는데.. 

기존 주소와 형태가 달라서 해당주소를 게시판들이 영상의 링크로 인식하지 못한다. 

예시 :

https://www.youtube.com/live/dOujIRKRhf8?feature=share

*위의 주소가 동영상으로 안보이면 문제가 해결되지 않은 것임

잇싸 초반에 shorts링크를 퍼오면 영상이 재생이 안되던 이슈가 있었는데.. 

지금은 고쳐진거 같은데..  shorts도 같은 문제를 가지고 있었던것으로 기억한다. 지금은 고쳐진듯.. 

결론: 

한마디로 문제는 

3. 유튜브 라이브의 영상주소에 대응을 하지 못한다는것.. 

인데.. 유튜브 실시간 링크 만의 문제가 아닌거 같다. 

+

관련 기술에대해서 자세히 알지 못하다보니까 뭐라고 하는게 웃낀상황이기도 하지만. 

어떻게 고쳐야 할지까지 쓰지못하는점은 죄송하게 생각합니다. 

그래도 유져 로서 결과물을 보는거는 누구나 할 수 있는거니까.. 

+

대략적으로 생각해본 해결하는 방식?

2. h ttps://youtube.com/shorts/(영상고유주소)?feature=share(이거는 정상작동하는 링크니까..)

정규표현식 으로 shorts 라는 단어를 변환해서 해당코드의 위치를 찾아내서..

3. https://www.youtube.com/live/(영상고유주소)?feature=share(이거는 정상작동하지 않는 링크니까..)

정규식으로  뭐 이렇게 저렇게 해서 인식하게 만들면 되지 않을까란 생각.. 

+

유튜브 만의 문제는 아닌거 같다..

인스타그램도 마찬가지.. (인스타그램만이 아닐수도 있겠다는 생각이 점점일이커져버리네.. 일일이 다 테스트를 언제 다해본다람.. ㅜ.ㅜ)

https://itssa.co.kr/2712416

여기에 달은 제가쓴 댓글도 비슷한 맥락의 이야기

(한줄요약 : 인스타를 퍼오면 PC에선 잘 보이는데 모바일에서는 안보인다.) 

iframe으로 로드가 되는 형태의 것들..

유튜브, 인스타, 트위터, 코드펜 들의 약간의 조정들이 필요하다..(진짜 눈꼽만큼의 쥐똥만큼의 조정 이긴한데.. 정확한 위치와 방법을 못찾으면 해결하기 어렵지.. )

다시 정리하면 

1. 게시글 에서의 문제

유튜브 실시간 : 

게시글에서는 유튜브 실시간 영상의 링크가 iframe로 대응 하도록 정규표현식어쩌구저쩌구를 이용해 찾아서 추가 해야된다. 

인스타그램 링크(모바일만 문제):

링크를 iframe로 뿌려줄때 보여지는 width(좌우넓이) height(위아래높이) 값을 css에서 잘 설정되게 해야한다. 

모바일에서는 안보이니까. 

(* 트위터는 정상적으로 작동하니까 트위터에서사용한 값을 고대로 가져오면 해결이 수월할듯)

2. 댓글 에서의 문제.. 

댓글에 유튜브 영상을 링크를 달았을때 width값이 이상함.. 

-------------------------------------------------------------------

발생하는 업무의 량: 

생각하다 보니 점점 문제가 커지고..

점점 문제의 근본으로 가게 된다랄까..  

유져들이 주로 링크하는 플렛폼이 무엇인지..를 먼저 확인하고

(1. 유튜브 2. 인스타 3. 페이스북 4.트위터  코드팬은 제외, CodePen링크는 내가 한번올린게 전부일듯..  )

테스트 환경 별로

게시글에서의 링크 (PC/모바일/앱 에서 체크)

댓글에서의 링크 (PC/모바일/앱 에서 체크)

와 이게 결정 해야될게 엄청 많네.. 

플랫폼 별로 일단 4개 에서

게시판에서 어떻게 보여질지와

댓글에서 어떻게 보여질지 를

다시  PC/모바일/앱에서 어떻게 보여질지 니까.. 

4(주요플렛폼의갯수) x 2(게시글창, 댓글창) x 3(PC/모바일/앱)

4 x 2 x 3 = 24

24개의 width 와 height를 결정을 해야되네.. 

(몇번의 테스트를 거쳐서 얼마의 사이즈가 최적화된 사이즈일지 고민과 결정을 해야됨..)

(반응형일테니까 고정값은 안되고 max-width로 해서 그걸 담아주는 틀을 반응형으로.. 고정값으로 해야되는경우도 있을테고..  )

(말이 쉽지 맨날맨날 해오던사람한테는 아무문제가 아닐 수도 있지만..

맨날 하는사람이 아닌경우에는 골치가 골치가 엄청 아픈 문제)

(생각해보니까 맨날 하는사람은 큰문제가 아닐수도..

맨날 하는사람일까? 아니면 가끔 하는사람일까?)

(프론트엔드 하시는분들은 마치 랩을 하는것처럼

폰트 얼마, 페딩 얼마, 자간 얼마, 박스 사이즈얼마, 뭐 얼마, 뭐 얼마, 뭐 얼마..

그냥 머릿속에서 줄줄줄줄 자기가 자주 쓰는 사이즈 숫자가 줄줄줄줄 나오던데..  마치 랩하는것처럼..

근데 또 그게 얼추 다맞아..  왜 하는지는 모르는데 해오던대로 하면 대충 다 맞아버리는... 그것이 전문가?)

-------------------------------------------------------------------

+ 

댓글창에 유튜브 영상의 링크를 댓글로 달았을때 좌우 크기 

초반에 한창 수정을 해주시는 모습을 보였던거 같아서.. 

노하우가 있으실거 같은데..

암튼 지금까지 오게 되었다는.. 

+

iframe 에서 width  height 값의 우선순위를 어떻게 줄것인지 css에서 잘 설정하는것.. 

PC,모바일,앱 까지 오류없이 대응하게 만드는게 복잡하긴 할듯..

정방향의 접근은 이렇고 

역방향의 접근을 하면 뭐 생각보다 간단할 수도.. 

유튜브실시간 링크 안보임? 오케이 알겠어 수정

인스타 링크 아래 짤림? 오케이 알겠어 수정

댓글에 유튜브 영상 좌우가 짤림? 오케이 알겟어 수정.. 

뭐 이런식으로 접근하면.. 간단한 문제일 수도 있음..

문제를 정의해서 설명하려다보니 글이 길어졌을 뿐일 수도 있음.. 

+

내일아침까지 라는 식으로 접근하면 싸움나고..

이런방향으로.. 한발한발 걸어간다 뭐 이정도로 접근해야 해결이 될듯.. 

(왜냐하면.. 링크를 해올 대상이되는 대형업체들이 링크의 형태를 변경하기도 하기때문에.. )

정작 쓰려던 글은 못써버렸네.. 다음에... 

+

누가 깃허브도 퍼와버리네.. 

깃허브도 추가.. 

(사이트 하나 늘어날때마다 업무는 8개씩 늘어난다란...)