Programing

YouTube 동영상 퍼가기

lottogame 2020. 4. 15. 10:21
반응형

YouTube 동영상 퍼가기


나는 마크 업을 처음 접했다. (픽업이 매우 쉽지만). 패키지 작업 중이며 위키 페이지를 도움말 매뉴얼처럼 멋지게 만들려고합니다. YouTube 비디오 링크를 위키 페이지에 매우 쉽게 삽입 할 수 있지만 YouTube 비디오를 어떻게 포함합니까? 불가능할 수도 있습니다.

나는 당신이 HTML 태그를 사용할 수 있다고 읽었으므로 다음과 같이이 링크 당 HTML로 임베드를 시도했습니다 .

<object width="425" height="350">
  <param name="movie" value="http://www.youtube.com/user/wwwLoveWatercom?v=BTRN1YETpyg" />
  <param name="wmode" value="transparent" />
  <embed src="http://www.youtube.com/user/wwwLoveWatercom?v=BTRN1YETpyg"
         type="application/x-shockwave-flash"
         wmode="transparent" width="425" height="350" />
</object>

그리고 페이지를 저장했지만 아무 일도 일어나지 않았습니다.

  1. github wikim 페이지에 YouTube 비디오를 포함시킬 수 있습니까?
  2. 그렇다면 어떻게?

비디오를 직접 삽입 할 수는 없지만 YouTube 비디오에 연결되는 이미지를 넣을 수 있습니다.

[![IMAGE ALT TEXT HERE](https://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](https://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE)

자세한 내용은 여기 를 참조 하십시오 .


완전한 예

@MGA 의 답변 에서 확장

Markdown에 비디오 포함시킬 수는 없지만 다음 형식을 사용하여 Markdown 파일에 유효한 링크 된 이미지포함시켜 " 가짜 "를 지정할 수 있습니다 .

[![IMAGE ALT TEXT](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE "Video Title")

마크 다운 설명

이 마크 업 스 니펫이 복잡해 보이면 두 부분으로 나눕니다.


![image alt text](http//example.io/link-to-image)
링크에 싸인 이미지
[link text](http//example.io/my-link "link title")

유효한 마크 다운 및 YouTube 썸네일을 사용하는 예 :

모든 것이 굉장하다

YouTube에서 미리보기 이미지를 직접 소싱하고 실제 동영상에 연결하므로 사용자가 이미지 / 썸네일을 클릭하면 동영상으로 이동합니다.

암호:

[![Everything Is AWESOME](https://img.youtube.com/vi/StTqXEQ2l-Y/0.jpg)](https://www.youtube.com/watch?v=StTqXEQ2l-Y "Everything Is AWESOME")

또는 독자에게이미지 / 섬네일이 실제로 재생 가능한 비디오라는 시각적 신호 를 제공하려면YouTube에서 비디오의 고유 한 스크린 샷을 찍고 대신 섬네일로 사용하십시오.

비디오 컨트롤이있는 스크린 샷을 Visual Cue로 사용하는 예 :

모든 것이 굉장하다

암호:

[![Everything Is AWESOME](http://i.imgur.com/Ot5DWAW.png)](https://youtu.be/StTqXEQ2l-Y?t=35s "Everything Is AWESOME")

 명확한 장점

이 추가 단계의 몇 가지를 (필요하지만 ) 스크린 샷 복용 비디오와 (의 B ) 업로드를 당신이 그것을 가지고 않는 썸네일로 이미지를 사용할 수 있도록 3 분명한 장점 :

  1. 마크 다운 (또는 결과 HTML 페이지)을 읽는 사람에게는 비디오를 볼 수 있다는 시각적 신호 가 있습니다 ( 비디오 컨트롤은 클릭 유도 )
  2. 동영상에서 미리보기 이미지로 사용할 특정 프레임선택할 수 있습니다 (따라서 콘텐츠를 더 매력적으로 만듭니다 )
  3. 링크 된 이미지를 클릭하면 재생이 시작되는 비디오 의 특정 시간연결할 수 있습니다 . (이 경우 35 초부터)

스크린 샷을 찍고 업로드하는 데 몇 초가 걸리지 만 비용이 많이 듭니다.

어디서나 작동합니다!

이 때문에 100 % 표준 가격 인하, 그것은 작동 사방 ... GitHub의, REDIT, 유령과 그것을 시도 물론 에 StackOverflow에 여기!

비 메오

이 방법은 Vimeo 비디오에서도 작동합니다

작은 빨간 타는 두건

암호

[![Little red ridning hood](http://i.imgur.com/7YTMFQp.png)](https://vimeo.com/3514904 "Little red riding hood - Click to Watch!")

노트:


마크 다운은 공식적으로 비디오 임베딩을 지원 하지 않지만 그 안에 원시 HTML을 임베드 할 수 있습니다. GitHub Pages로 테스트했으며 완벽하게 작동합니다.

  1. YouTube의 비디오 페이지로 이동하여 공유 버튼을 클릭하십시오
  2. 퍼가기 선택
  3. 마크 다운에 HTML 스 니펫을 복사하여 붙여 넣기

스 니펫은 다음과 같습니다.

    <iframe width="560" height="315"
src="https://www.youtube.com/embed/MUQfKFzIOeU" 
frameborder="0" 
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
allowfullscreen></iframe>

추신 : 여기 에서 라이브 미리보기를 확인할 수 있습니다


HTML 태그가 마크 다운 + 가운데 정렬보다 더 좋아하는 경우 :

<div align="center">
  <a href="https://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE"><img src="https://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg" alt="IMAGE ALT TEXT"></a>
</div>


@MGA 및 @nelsonic의 답변을 확장하고 필요한 마크 다운을 얻는 것이 좀 더 쉬워졌습니다.

위에서 언급 한 제안을 취하여 YouTube URL과 일부 이미지 대체 텍스트를 가져 와서 Github ReadMe에 붙여 넣을 수있는 MarkDown 링크 이미지를 반환하는 작은 Clay 기능으로 결합했습니다 : https : // www. clay.run/services/nicoslepicos/github-create-video-embed-mock/code

@nelsonic이 제안한 비디오 플레이어 컨트롤이있는 것에서 작동합니다.


<iframe width="560" height="315"
src="https://www.youtube.com/embed/videoseries?list=PLx0sYbCqOb8TBPRdmBHs5Iftvv9TPboYG"
frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

YouTube에 대한 추가 팁, 요령 확인


iframe을 사용하여 다음과 같이 YouTube 비디오를 임베드했습니다.

<div align="center">
    <iframe width="620" height="315"
        src="https://www.youtube.com/embed/OhlVBpEnjig">
    </iframe>
</div>

참고 URL : https://stackoverflow.com/questions/11804820/embed-a-youtube-video

반응형