YouTube allows people to embed their videos. How do I make this feature for my videos? Looking for guidance or a tutorial because I don't have a clue.
Youtube gives an iframe with src pointing to a page that contains only a video.
<iframe width="560" height="315" src="//www.youtube.com/embed/1PtR6qtdi1s" frameborder="0" allowfullscreen></iframe>
Do you see that src is equal to? http://www.youtube.com/embed/1PtR6qtdi1s
Got it?
In HTML5 you can use the video tag.
<video width="320" height="240" controls>
<source src="src/to/video.mp4" type="video/mp4">
Your browser doesn't support HTML5 VIDEO!
</video>
Change values to desired width, height, src and video type (it supports mp4, webm and ogg).
Related
I'm trying to import a video onto my site. I don't want any controls, I just want it to play. I'm using the tag, but when I downloaded the video from YouTube and tried to use it, it said that "Brackets only currently supports UTF-8 encoded files". (Brackets is my code editor) I opened the file in Notepad++ and converted it to UTF-8 to no avail. I downloaded an extension to convert it to UTF-8, also not working. Here's the video: https://www.youtube.com/watch?v=LMd580H8rGY
Please help!
You have to upload the video on your server then add to your page something like:
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
More info : https://www.w3schools.com/html/html5_video.asp
READ THE DOC !
YouTube give option named by Embed in side share button
<iframe width="560" height="315" src="https://www.youtube.com/embed/LMd580H8rGY?ecver=1" frameborder="0" allowfullscreen></iframe>
this is HTML Code
change the height & width from iframe
Exist any posibily to put to video player HTML5 as source a video from youtube?
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
I want to embed videos from youtube using HTML5 player. I've tried this solution but it's not working.
TRY USING IFRAMES instead of <video>. I'ts not possible to embed youtube videos using HTMl5 video tag.
Try this it will work
<iframe type="text/html"
width="320" height="240"
src="http://www.youtube.com/embed/VIDEO_ID"
frameborder="0">
</iframe>
Your options are outlined in the Developer API for youTube here: https://developers.google.com/youtube/player_parameters
There are restrictions on what you can/can't do with the content they are hosting (they are, after all, paying for storage, bandwidth, transcoding etc), so if you need more flexibility you will need to find your own video hosting solution
I used HTML's own video tag instead of the "old" flash way to display a video on my own site:
<video src="video.mp4" preload="auto" autobuffer controls autoplay>
<iframe src="http://player.vimeo.com/video/123456" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</video>
I tested it on my own computer with 3 different browsers: Chrome (30), Firefox (24) and IE (10). It worked as expected.
Then I asked another user to test my site on different machines with different browsers. Unfortunately it didn't work on all machines, even though he used the same browser versions like me.
Firefox displayed him the following error: Video format or MIME type is not supported.
How is it possible, that the same browsers behave different on
different machines?
Why didn't Firefox display the alternative
content, in my case the vimeo video in the iframe?
Is there a way to ensure and check that my videos will be displayed
in all browsers on all machines?
Thank you!
Firefox has no native MP4/H.264 support, it uses the codec available on the system for this, and in case there is no proper H.264 codec, the video won't play, and you'll receive that error message.
See also http://en.wikipedia.org/wiki/HTML5_video#Supported_video_formats
The fallback content is only used in case the browser doesn't understand the video element at all, unsupported codecs won't cause the fallback to be used.
In order to make sure the video plays in all major browsers, irrespective of the OS, you have to supply the video in different formats using the source element.
Currently using WEBM VP8/9, OGG Theora and MP4 H.264 should do it.
<video preload="auto" autobuffer controls autoplay>
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
<source src="video.mp4" type="video/mp4">
<iframe src="http://player.vimeo.com/video/123456" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</video>
You could also try utilizing the error event on the video element or on the last source element, and implement a JavaScript based fallback where you replace the video element with its content.
Example from the W3 specs:
<script>
function fallback(video) {
// replace <video> with its contents
while (video.hasChildNodes()) {
if (video.firstChild instanceof HTMLSourceElement)
video.removeChild(video.firstChild);
else
video.parentNode.insertBefore(video.firstChild, video);
}
video.parentNode.removeChild(video);
}
</script>
<video controls autoplay>
<source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'
onerror="fallback(parentNode)">
...
</video>
http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#source-default-media
I can I play a YouTube video in my site using HTML 5 <video> controls?
I am able to run the video for MP4, ogg format,
<video width="710" height="423" controls>
<source src="testvideo.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
but how to run teh video where the source is from youtube
ex:
<video width="710" height="423" controls>
<source src="https://www.youtube.com/v/<youtube video id>?enablejsapi=1&rel=0&fs=1" type="????"></source>
Your browser does not support the video tag.
</video>
I provided the valid source and given type as video/youtube, but got the error as No video with supported format and MIME type found
Please let me know if you anybody have any input
Thanks, Sharath
if your tag
<youtube video id>
produces the 11 character code such as for this video
https://www.youtube.com/watch?v=t2ByLmLnYJ8
the 11 character code would be t2ByLmLnYJ8
then I think you should try
<iframe width="710" height="423"
src="http://www.youtube.com/embed/<youtube video id>">
</iframe>
It is my understanding that YouTube has taken over ensuring that the video format is compatible with the device so you don't have to worry about it with this method.
I want to play video's using the HTML5 <video> tag and fancybox, with the links directing to youtube videos?
here's my code so far
<video width="480" height="270" controls="controls" poster="../images/youtube-logo.png">
<source src="http://o-o---preferred---sn-5hn7snl7---v12---lscache8.c.youtube.com/videoplayback?upn=paJG2CcEhGw&sparams=cp%2Cgcr%2Cid%2Cip%2Cipbits%2Citag%2Cratebypass%2Csource%2Cupn%2Cexpire&fexp=906356%2C910014%2C914093%2C922401%2C920704%2C912806%2C927201%2C922403%2C925003%2C913546%2C913556%2C916805%2C920201%2C901451&ms=au&expire=1352949266&itag=46&ipbits=8&gcr=nl&sver=3&ratebypass=yes&mt=1352923510&ip=83.83.121.109&mv=m&source=youtube&key=yt1&cp=U0hUR1lPV19LUENONF9RSUFDOjBkVU41a1M4UEVp&id=d72f1d6250563a1e&signature=6C5130076CA770F67B4C797191BC0997EA040B74.10D3AEAA60E7AE1CF1D49DACF7178F3FCBBD56AE" type="video/mp4">
<source src="http://o-o---preferred---sn-5hn7snl7---v12---lscache8.c.youtube.com/videoplayback?upn=paJG2CcEhGw&sparams=cp%2Cgcr%2Cid%2Cip%2Cipbits%2Citag%2Cratebypass%2Csource%2Cupn%2Cexpire&fexp=906356%2C910014%2C914093%2C922401%2C920704%2C912806%2C927201%2C922403%2C925003%2C913546%2C913556%2C916805%2C920201%2C901451&ms=au&expire=1352949266&itag=46&ipbits=8&gcr=nl&sver=3&ratebypass=yes&mt=1352923510&ip=83.83.121.109&mv=m&source=youtube&key=yt1&cp=U0hUR1lPV19LUENONF9RSUFDOjBkVU41a1M4UEVp&id=d72f1d6250563a1e&signature=6C5130076CA770F67B4C797191BC0997EA040B74.10D3AEAA60E7AE1CF1D49DACF7178F3FCBBD56AE" type="video/ogg">
<source src="http://o-o---preferred---sn-5hn7snl7---v12---lscache8.c.youtube.com/videoplayback?upn=paJG2CcEhGw&sparams=cp%2Cgcr%2Cid%2Cip%2Cipbits%2Citag%2Cratebypass%2Csource%2Cupn%2Cexpire&fexp=906356%2C910014%2C914093%2C922401%2C920704%2C912806%2C927201%2C922403%2C925003%2C913546%2C913556%2C916805%2C920201%2C901451&ms=au&expire=1352949266&itag=46&ipbits=8&gcr=nl&sver=3&ratebypass=yes&mt=1352923510&ip=83.83.121.109&mv=m&source=youtube&key=yt1&cp=U0hUR1lPV19LUENONF9RSUFDOjBkVU41a1M4UEVp&id=d72f1d6250563a1e&signature=6C5130076CA770F67B4C797191BC0997EA040B74.10D3AEAA60E7AE1CF1D49DACF7178F3FCBBD56AE" type="video/webm">
Your browser does not support the video tag.
<iframe width="480" height="270" type="application/x-shockwave-flash"
src="http://www.youtube.com/embed/1y8dYlBWOh4?wmode=opaque">
</iframe>
</video>
As you can see i also added an iframe tag to support older browsers.
But after some tweaking i can't get fancybox to open everything, in any of the videos in the video tag??
Thanks in Advance!
The direct YouTube links are 'refreshed', although they work for a moment the next day, they no longer work, cause the links are 'broken'.
the best way to play youtube videos in html5 is like so
<iframe width="480" height="270"
src="http://www.youtube.com/embed/1y8dYlBWOh4?html5=1">
</iframe>
the html5=1 tells Youtube to use html5 to play the videos, and NOT flash!