Bagaimana saya bisa menyematkan video YouTube di halaman wiki GitHub?

298

Saya cukup baru untuk markup (meskipun sangat mudah untuk diambil). Saya sedang mengerjakan sebuah paket dan berusaha mendapatkan halaman wiki yang terlihat bagus sebagai manual bantuan. Saya dapat memasukkan tautan video YouTube ke halaman wiki dengan cukup mudah, tetapi bagaimana cara menyematkan video YouTube. Saya tahu ini tidak mungkin.

Saya telah membaca Anda dapat menggunakan tag HTML jadi saya mencoba menyematkan dengan HTML per tautan ini sebagai berikut:

<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>

Dan menyelamatkan halaman tetapi tidak ada yang terjadi.

  1. Apakah mungkin untuk menyematkan video YouTube di halaman wiki GitHub?
  2. Kalau begitu bagaimana?
Tyler Rinker
sumber
4
Mungkin saja halaman wiki github tidak mengizinkan tag <object> untuk tujuan keamanan.
Cypress Frankenfeld
2
Lihat juga stackoverflow.com/questions/4279611/...
Brian Burns

Jawaban:

470

Anda tidak dapat menyematkan video secara langsung, tetapi Anda dapat meletakkan gambar yang tertaut ke video 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)

Untuk informasi lebih lanjut, lihat cheatsheet Markdown ini di GitHub.

MGA
sumber
2
Iframe tidak berfungsi untuk halaman wiki, hanya solusi ini yang saat ini berfungsi.
Tyler Rinker
270

Contoh Lengkap

Memperluas pada Jawaban @MGA

Meskipun tidak mungkin untuk menyematkan video dalam Markdown Anda dapat "memalsunya" dengan memasukkan gambar tertaut yang valid dalam file markup Anda, menggunakan format ini:

[![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")

Penjelasan tentang penurunan harga

Jika potongan markup ini terlihat rumit, pecah menjadi dua bagian:

sebuah gambar
![image alt text](https://example.com/link-to-image)
terbungkus tautan
[link text](https://example.com/my-link "link title")

Contoh menggunakan Penurunan Nilai Valid dan Gambar Mini YouTube:

Segalanya menarik

Kami mencari gambar mini langsung dari YouTube dan menautkan ke video yang sebenarnya, jadi ketika orang mengklik gambar / gambar mini mereka akan dibawa ke video.

Kode:

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

ATAU Jika Anda ingin memberi isyarat visual kepada pembaca bahwa gambar / thumbnail sebenarnya adalahvideo yang dapat diputar , ambil tangkapan layar video Anda sendiri di YouTube dan gunakan itu sebagai thumbnail.

Contoh menggunakan Screenshot dengan Kontrol Video sebagai Visual Cue:

Segalanya menarik

Kode:

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

 Keuntungan yang jelas

Meskipun ini memerlukan beberapa langkah tambahan ( a ) mengambil tangkapan layar video dan ( b ) mengunggahnya sehingga Anda dapat menggunakan gambar tersebut sebagai gambar mini Anda, namun ia memiliki 3 keuntungan jelas :

  1. Orang yang membaca penurunan harga Anda (atau halaman html yang dihasilkan) memiliki isyarat visual yang memberi tahu mereka bahwa mereka dapat menonton video ( kontrol video mendorong mengklik )
  2. Anda dapat memilih bingkai tertentu dalam video untuk digunakan sebagai gambar mini (sehingga membuat konten Anda lebih menarik )
  3. Anda dapat menautkan ke waktu tertentu dalam video dari mana pemutaran akan dimulai ketika gambar yang terhubung diklik. (dalam kasus kami dari 35 detik)

Mengambil dan mengunggah tangkapan layar membutuhkan waktu beberapa detik tetapi hasilnya besar.

Bekerja Di Mana Saja!

Karena ini adalah penurunan standar, ia berfungsi di mana-mana. coba di GitHub, Reddit, Ghost, dan di sini di Stack Overflow.

Vimeo

Pendekatan ini juga berfungsi dengan video Vimeo

Contoh

Anak berkerudung merah

Kode

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

Catatan:

nelsonic
sumber
2
Baru-baru ini saya menemukan bahwa saya harus menghilangkan skema URL http / https dari URL untuk membuatnya berfungsi, yaitu[![Everything Is AWESOME](//img.youtube.com/vi/StTqXEQ2l-Y/0.jpg)](//www.youtube.com/watch?v=StTqXEQ2l-Y "Everything Is AWESOME")
Stephen Quan
1
@StephenQuan parser / platform penurunan harga apa yang Anda gunakan? kita menggunakan kode dengan para httpatau httpsdi GitHub misalnya: github.com/dwyl/remote-working mana gambar video dan bekerja hubungan ...
nelsonic
26

Penurunan harga tidak secara resmi mendukung embeddings video tetapi Anda dapat menanamkan HTML mentah di dalamnya. Saya mengujinya dengan GitHub Pages dan berfungsi dengan sempurna.

  1. Buka halaman Video di YouTube dan klik pada Tombol Bagikan
  2. Pilih Sematkan
  3. Salin dan Tempel cuplikan HTML dalam penurunan harga Anda

Cuplikan terlihat seperti:

    <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>

PS: Anda dapat melihat pratinjau langsung di sini

Daksh Shah
sumber
Strategi iframe ini tampak menjanjikan. Namun, itu tidak berfungsi di file READ.md repo saya .
Adam Hurwitz
8

Jika Anda menyukai tag HTML lebih dari markdown + perataan tengah:

<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>

Ivan Berezanskiy
sumber
3

Rata tengahkan Video dengan Gambar Kecil dan Tautan:

<div align="center">
      <a href="https://www.youtube.com/watch?v=StTqXEQ2l-Y">
     <img 
      src="https://img.youtube.com/vi/StTqXEQ2l-Y/0.jpg" 
      alt="Everything Is AWESOME" 
      style="width:100%;">
      </a>
    </div>

Hasil:

masukkan deskripsi gambar di sini

Hitesh Sahu
sumber
Ini adalah jawaban yang bagus karena mudah untuk diotomatisasi! Untuk itu, templat untuk tautan gambar itu adalah https://img.youtube.com/vi/ID_OF_VIDEO/0.jpgdan API untuk membentuk tautan gambar dijelaskan secara terperinci dalam jawaban ini: stackoverflow.com/a/2068371/55478
Noah Sussman
-5
<iframe width="560" height="315"
src="https://www.youtube.com/embed/videoseries?list=PLx0sYbCqOb8TBPRdmBHs5Iftvv9TPboYG"
frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Lihat lebih banyak tips, trik tentang youtube

jeffery.yuan
sumber