Jak mogę osadzić film z YouTube na stronach wiki GitHub?

297

Jestem dość nowy w znacznikach (choć bardzo łatwo jest go podnieść). Pracuję nad pakietem i staram się, aby strony wiki wyglądały ładnie jako podręcznik pomocy. Mogę dość łatwo wstawić link do filmu na YouTube na stronie wiki, ale jak osadzić film na YouTube. Wiem, że to może nie być możliwe.

Przeczytałem, że możesz używać tagów HTML, więc próbowałem osadzić HTML dla tego linku w następujący sposób:

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

I zapisałem stronę, ale nic się nie stało.

  1. Czy można osadzić film z YouTube na stronach wiki GitHub?
  2. Jeśli tak to jak?
Tyler Rinker
źródło
4
Możliwe, że strony wiki github nie zezwalają na znaczniki <object> ze względów bezpieczeństwa.
Cypress Frankenfeld
2
Zobacz także stackoverflow.com/questions/4279611/…
Brian Burns,

Odpowiedzi:

468

Nie można bezpośrednio osadzać filmów, ale możesz umieścić obraz, który prowadzi do filmu na 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)

Aby uzyskać więcej informacji, zapoznaj się z tym ściągiem Markdown na GitHub.

MGA
źródło
1
Ramka iframe nie działa na stronach wiki, obecnie działa tylko to rozwiązanie.
Tyler Rinker
270

Kompletny przykład

Rozszerzając @MGA „s Odpowiedź

Chociaż nie można osadzić wideo w Markdown, można go „sfałszować”, dołączając prawidłowy obraz połączony do pliku znaczników, używając tego formatu:

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

Wyjaśnienie obniżki

Jeśli ten fragment znaczników wygląda na skomplikowany, podziel go na dwie części:

obraz
![image alt text](https://example.com/link-to-image)
zawinięty w link
[link text](https://example.com/my-link "link title")

Przykład użycia Valid Markdown i YouTube Thumbnail:

Wszystko jest wspaniałe

Pozyskujemy obraz miniatury bezpośrednio z YouTube i linkujemy do rzeczywistego wideo, więc gdy osoba kliknie obraz / miniaturę, zostanie przeniesiona do filmu.

Kod:

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

LUB Jeśli chcesz dać czytelnikom wizualną wskazówkę, że obraz / miniatura jest w rzeczywistości odtwarzalnym filmem, zrób własny zrzut ekranu wideo w YouTube i użyj go jako miniatury.

Przykład użycia zrzutu ekranu z kontrolkami wideo jako Visual Cue:

Wszystko jest wspaniałe

Kod:

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

 Wyraźne zalety

Chociaż wymaga to kilku dodatkowych kroków ( a ) zrobienia zrzutu ekranu wideo i ( b ) przesłania go, aby można było użyć obrazu jako miniatury, ma on 3 wyraźne zalety :

  1. Osoba czytająca Twoją obniżkę (lub wynikową stronę html) ma wizualną wskazówkę , że może obejrzeć wideo ( sterowanie wideo zachęca do klikania )
  2. Możesz wybrać konkretną klatkę w filmie, która będzie używana jako miniatura (dzięki czemu treść będzie bardziej wciągająca )
  3. Możesz utworzyć link do określonego czasu w filmie, od którego rozpocznie się odtwarzanie po kliknięciu połączonego obrazu. (w naszym przypadku od 35 sekund)

Wykonanie i przesłanie zrzutu ekranu zajmuje kilka sekund, ale przynosi dużą korzyść.

Działa wszędzie!

Ponieważ jest to standardowa obniżka, działa wszędzie. wypróbuj go na GitHub, Reddit, Ghost, a tutaj na Stack Overflow.

Vimeo

To podejście działa również w przypadku filmów Vimeo

Przykład

Czerwony Kapturek

Kod

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

Uwagi:

nelsoński
źródło
2
Niedawno odkryłem, że musiałem pominąć schemat URL http / https w adresie URL, aby to zadziałało, tj.[![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, którego parsera / platformy Markdown używałeś? używamy kod zhttp lub httpsna GitHub np github.com/dwyl/remote-working gdzie obraz wideo i praca link ...
nelsonic
26

Markdown oficjalnie nie obsługuje osadzania wideo, ale możesz osadzić w nim surowy HTML. Przetestowałem z GitHub Pages i działa bezbłędnie.

  1. Przejdź do strony Wideo na YouTube i kliknij przycisk Udostępnij
  2. Wybierz Osadź
  3. Skopiuj i wklej fragment kodu HTML w swoim przecenianiu

Fragment wygląda następująco:

    <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: Możesz sprawdzić podgląd na żywo tutaj

Daksh Shah
źródło
Ta strategia iframe wyglądała obiecująco. Nie działa to jednak w pliku READ.md mojego repozytorium .
Adam Hurwitz,
8

Jeśli lubisz tagi HTML bardziej niż markdown + centrowanie:

<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
źródło
3

Wyśrodkuj wyrównanie wideo za pomocą miniatury i łącza:

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

Wynik:

wprowadź opis zdjęcia tutaj

Hitesh Sahu
źródło
To świetna odpowiedź, ponieważ łatwo ją zautomatyzować! W tym celu szablon tego linku do obrazu jest https://img.youtube.com/vi/ID_OF_VIDEO/0.jpgi interfejs API do tworzenia linków do obrazu jest szczegółowo wyjaśniony w tej odpowiedzi: stackoverflow.com/a/2068371/55478
Noah Sussman
-5
  • Możemy użyć kodu HTML w Markdown.
  • Sprawdź oficjalny dokument na stronie Osadzanie wideo lub playlisty na stronie support.google.com/youtube
<iframe width="560" height="315"
src="https://www.youtube.com/embed/videoseries?list=PLx0sYbCqOb8TBPRdmBHs5Iftvv9TPboYG"
frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Sprawdź więcej porad i wskazówek na temat YouTube

jeffery.yuan
źródło