Show Youtube video source into HTML5 video tag

Question

I m trying to put a YouTube video source into the HTML5  lt video gt  tag  but it doesn t seem to work  After some Googling  I found out that HTML5 doesn t support YouTube video URLs as a source    Can you use HTML5 to embed YouTube videos  If not  is there any workaround

User · Answer

how about doing it the way hooktube does it? they don't actually use the video URL for the html5 element, but the google video redirector url that calls upon that video. check out here's how they present some despacito random video...

<video id="player-obj" controls="" src="https://redirector.googlevideo.com/videoplayback?ratebypass=yes&amp;mt=1510077993----SKIPPED----amp;utmg=ytap1,,hd720"><source>Your browser does not support HTML5 video.</video>

the code is for the following video page https://hooktube.com/watch?v=72UO0v5ESUo

youtube to mp3 on the other hand has turned into extremely monetized monster that returns now download.html on half of video download requests... annoying...

the 2 links in this answer are to my personal experiences with both resources. how hooktube is nice and fresh and actually helps avoid censorship and geo restrictions.. check it out, it's pretty cool. and youtubeinmp4 is a popup monster now known as ConvertInMp4...

User · Answer

Step 1  add  amp html5 True to your favorite youtube url Step 2  Find  lt video  gt  tag in source Step 3  Add controls  quot controls quot  to video tag   lt video controls  quot controls quot       gt  Example   x000D   x000D   lt video controls  controls  class  video-stream  x-webkit-airplay  allow  data-youtube-id  N9oxmRT2YWw  src  http   v20 lscache8 c youtube com videoplayback sparams id 2Cexpire 2Cip 2Cipbits 2Citag 2Cratebypass 2Coc 3AU0hPRVRMVV9FSkNOOV9MRllD amp amp itag 43 amp amp ipbits 0 amp amp signature D2BCBE2F115E68C5FF97673F1D797F3C3E3BFB99 59252109C7D2B995A8D51A461FF9A6264879948E amp amp sver 3 amp amp ratebypass yes amp amp expire 1300417200 amp amp key yt1 amp amp ip 0 0 0 0 amp amp id 37da319914f6616c  gt  lt  video gt  x000D   x000D   x000D   Note there seems to some expire stuff  I don t know how long the src string will work  Still testing myself  Edit  July 28  2011   Note that this video src is specific to the browser you use to retrieve the page source   I think Youtube generates this HTML dynamically  at least currently  so in testing if I copy in Firefox this works in Firefox  but not Chrome  for example

User · Answer

The easiest answer is given by W3schools  https   www w3schools com html html youtube asp  Upload your video to Youtube Note the Video ID Now write this code in your HTML5    lt iframe width  quot 640 quot  height  quot 520 quot  src  quot https   www youtube com embed  lt VideoID gt  quot  gt   lt  iframe gt

User · Answer

The  lt video gt  tag is meant to load in a video of a supported format  which may differ by browser     YouTube embed links are not just videos  they are typically webpages that contain logic to detect what your user supports and how they can play the youtube video  using HTML5  or flash  or some other plugin based on what is available on the users PC  This is why you are having a difficult time using the video tag with youtube videos   YouTube does offer a developer API to embed a youtube video into your page   I made a JSFiddle as a live example  http   jsfiddle net zub16fgt   And you can read more about the YouTube API here  https   developers google com youtube iframe api reference Getting Started  The Code can also be found below  In your HTML         lt div id  player  gt  lt  div gt    In your Javascript   var onPlayerReady   function event        event target playVideo             The first argument of YT Player is an HTML element ID      YouTube API will replace my  lt div id  player  gt  tag     with an iframe containing the youtube video   var player   new YT Player  player         height  320      width  400      videoId    6Dc1C77nra4       events              onReady    onPlayerReady

User · Answer

With the new iframe tag embedded in your website  the code will automatically detect whether you are using a browser that supports HTML5 or not   The iframe code for embedding YouTube videos is as follows  simply copy the Video ID and replace in the code below    lt iframe type  text html       width  640       height  385       src  http   www youtube com embed VIDEO ID      frameborder  0  gt   lt  iframe gt

User · Answer

I have created a realtively small  4 89 KB  javascript library for this exact functionality  Found on my GitHub here  https   github com thelevicole youtube-to-html5-loader  It s as simple as   lt video data-yt2html5  quot https   www youtube com watch v ScMzIvxBSi4 quot  gt  lt  video gt    lt script src  quot https   cdn jsdelivr net gh thelevicole youtube-to-html5-loader 2 0 0 dist YouTubeToHtml5 js quot  gt  lt  script gt   lt script gt new YouTubeToHtml5    lt  script gt   Working example here  https   jsfiddle net thelevicole 5g6dbpx3 1  What the library does is extract the video ID from the data attribute and makes a request to the https   www youtube com get video info video id   It decodes the response which includes streaming information we can use to add a source to the  lt video gt  tag

User · Answer

This answer does not work anymore  but I m looking for a solution  As of   2015   02   24   there is a website  youtubeinmp4  that allows you to download youtube videos in  mp4 format  you can exploit this  with some JavaScript  to get away with embedding youtube videos in  lt video gt  tags  Here is a demo of this in action    Pros  Fairly easy to implement  Quite fast server response actually  it doesn t take that much to retrieve the videos   Abstraction  the accepted solution  even if it worked properly  would only be applicable if you knew beforehand which videos you were going to play  this works for any user inputted url      Cons  It obviously depends on the youtubeinmp4 com servers and their way of providing a downloading link  which can be passed as a  lt video gt  source   so this answer may not be valid in the future   You can t choose the video quality        JavaScript  after load  videos   document querySelectorAll  quot video quot    for  var i   0  l   videos length  i  lt  l  i          var video   videos i       var src   video src     function              var sources   video querySelectorAll  quot source quot            for  var j   0  sl   sources length  j  lt  sl  j                  var source   sources j               var type   source type              var isMp4   type indexOf  quot mp4 quot      -1              if  isMp4  return source src                    return null                if  src            var isYoutube   src  amp  amp  src match     youtu youtube      com   be      w W    i           if  isYoutube                var id   isYoutube 1  match  watch  v    w W   gi               id    id length  gt  1    id splice 1    id              id   id toString                var mp4url    quot http   www youtubeinmp4 com redirect php video  quot               video src   mp4url   id                        Usage  Full   x000D   x000D   lt video controls  true  gt           lt source src  www youtube com watch v 3bGNuRtlqAQ  type  video mp4    gt       lt  video gt  x000D   x000D   x000D   Standard video format     Usage  Mini   x000D   x000D   lt video src  youtu be MLeIBFYY6UY  controls  true  gt  lt  video gt  x000D   x000D   x000D   A little less common but quite smaller  using the shortened url youtu be as the src attribute directly in the  lt video gt  tag

[html] Show Youtube video source into HTML5 video tag?

Examples related to html

Examples related to youtube

Examples related to embedded-video