For example I want to get StackOwerflow logo as picture from youtube video.
From this youtube address: https://youtu.be/QwS1r1mc888?t=2
At this time: 00:02
I can take current video time, video data etc.
player= document.getElementById("movie_player");
player.getCurrentTime();
// ...
player.getVideoData();
How can I get video frame from specific time?
It is not possible to add a thumbnail image on iFrame.
You can use the iFrame of youtube as a target using . And then you can use a inside the tag
Check this answer:
Display thumbnail image in iframe
Related
I want get video URL of my live channel
I know https://www.youtube.com/embed/live_stream?channel=UChF0CL3nPrnp7q3hfbvVg6A is permanent video URL but i need
URL like https://youtu.be/xxxfd or https://www.youtube.com/watch?v=xxxxdfd
Is there any API to get it programmatically
1)Use the youtube site to find the video you want.
2)Click the 'Share' button below the video.
3)Click the 'Embed' button next to the link they show you.
4)Copy the iframe code given and paste it into the html of your web page.
Is there an option in iframe to prevent it from playing video i.e. I have following iframe:
<iframe src="https://www.youtube.com/embed/v2ifWcnQs6M" width="468" height="60" ></iframe>
I want to display just the thumbnail of youtube video with red 'play' button in the center of thumbnail, but disallow user to actually play video. Is there a way to do it ?
Because as I checked Youtube IFrame API there is no solution for getting youtube video id i.e. I have to parse url by myself and then construct the following url:
https://img.youtube.com/vi/video_id/0.jpg
And besides this url returns thumbnail without red 'play' button which I also want. So is there an HTML attribute in iframe or js workaround to do it ?
Add a transparent div on top of the YouTube video with CSS.
See example.
No. No such attribute. If you dont want to allow users play that video, you need to construct block manually. Get the thumbnail and create or cut play button image. Then within CSS write layout rules and show to user this constructed block
I would really like to have clickable time links on my website that will jump to specific times within my embedded youtube video. I know that this is possible within youtube itself (built in function on youtube where you just put the time you want in the format (0:00) and users can click it to jump to that point).
I was wondering if it is possible to mimic this function somehow with embedded youtube videos and javascript?
You can use the Youtube iFrame API. There is a function to get the current timestamp:
player.getCurrentTime():Number
Returns the elapsed time in seconds since the video started playing.
player.getDuration():Number
Returns the duration in seconds of the currently playing video. Note
that getDuration() will return 0 until the video's metadata is loaded,
which normally happens just after the video starts playing.
Use them like so:
ytplayer = document.getElementById("youtube_player");
ytplayer.getCurrentTime();
I have a Youtube video embedded on my site, and when the iframe that it is embedded in gets resized, the Youtube video restarts. Is this the expected behaviour? Is there any way around it? I have been trying to get the Youtube JS API working to no success, so I would prefer to not use it.
Any ideas?
How about you get the minute/second the video is at the moment of the resize so you reload it but with an auto starts on the same minute/second?
For example if you add this at the end of a youtube url it starts at minute 1 and 8 seconds:
#t=1m08s
I have a page that displays YouTube videos using the YouTube API. For each video I have a specific 30 second add video that I would like to play before the main video. Is there a way to do this through the YouTube API or plain javascript/jquery?
All you need to do is embed the ad first, then when it's done playing, hide it and show the main video.
First, detect when the ad is done playing with the Youtube API player.getPlayerState() function. This returns a zero when the video is ended.
Then, hide the embed with Javascript and show the main video.