When you embed a YouTube video using its provided <iframe> code: you're not able to hide title and a couple other "features".
Some of these features could be disabled using parameters, back in a day. As of now: they're deprecated.
So, now I'm left with a client that needs to embed YouTube videos without all of that junk we see when hovering over the video: title, related videos, channel logo, etc.
From what I've researched, it's not possible to disable title and a some other features: be it using URL parameters or CSS+JS.
Although, I've come with a solution that has a lot of potential: not only for user's privacy, but also for UX. This solution is:
figuring out a way to extract YouTube videos source URL;
using extracted URL in <video> or <iframe>;
replicate YouTube player styles.
For the first part, I've used Invidious API. But I think you can also create an API that uses youtube-dl to extract videos URL (?).
In my tests, I didn't even had to install my own isntance of Invidious: I've used public API endpoints:
https://yewtu.be/latest_version?id=dasdsa312&itag=84
Where:
id: video ID;
itag: video stream format code.
Then, I made JavaScript code to:
dynamically get all available Invidious public instances;
generate a video element with sources to many different video quality and available instances.
These sources are generated depending on the query parameters available in my website URL:
https://riservato-xyz.frama.io/watch/?v=gprAWYQ47uY
With that in mind, whenever I need a customized YouTube player, I can use my own website to embed YouTube videos.
I understand the testing website (former url) is slow, indeed. Although, this is because I'm not using my own Invidious instance and rely on public instance. BUT IT WORKS!
<iframe width="560"
height="315"
src="https://riservato-xyz.frama.io/watch/?v=W_xIBfrdxQU" frameborder="0"></iframe>
Related
I am deciding whether or not I should use the full YouTube API (registering for an API key, calling the YouTube JS and building the player from scratch) or if I should just register for an YouTube account, build a playlist and load this playlist on a client's website as is (using the iframe embed code, seen below):
<iframe width="100%" height="315"
src="https://www.youtube.com/embed/videoseries?list=XXXXXXX
&autoplay=1&rel=0&loop=1&shuffle=1" frameborder="0" allowfullscreen>
</iframe>
The embed code is easy enough, but from viewing earlier videos on YouTube Playlist settings, YouTube has removed quite a bit of functionality from basic playlist settings (autoplay, shuffling videos on play, start/stop times of each video in playlist, etc.)
I would imagine the switch for shuffle should be as easy as "&shuffle=1" or something like that. I'm not sure why YouTube makes it so difficult to comprehend new settings after having removed such a powerful feature from such a simple embed code.
Any ideas?
Here's an actual solution:
function onPlayerReady(event) {
event.target.playVideo();
setTimeout(setShuffleFunction, 1000);
}
function setShuffleFunction(){
player.setShuffle(true);
}
You have to use javascript to load the player.setShuffle(true) event, just after the first video starts (solution given here: YouTube API playlist shuffle). I didn't create it but I tried it and it worked for me too. I went two years thinking the feature was deprecated and no longer possible with embedded playlists. Seeing as this is the primary response when you google this issue, figured I'd help out.
You can find all the embed parameters YouTube supports here.
When displaying a Dailymotion (DMCloud) video in an iframe on my page, how can I use JavaScript to interact with video - get current playing time, for example?
Dailymotion have a JS SDK for this (docs), but I can't find how to use the SDK to interact with an existing iframe rather than create a new one.
So, assuming I have something like:
<iframe src="https://api.dmcloud.net/embed/4e5bf73e94a6f629c900461b/4fcbcc1a06361d0dda000267?auth=1571064530-0-6tpgjq7u-30443abdac10acef6cf336eb89412713& id="foo"></iframe>
Using JS, how can I get the current playing time of the video?
it looks like your are mixing DM cloud and Dailymotion.com
The APIs are different and the documentation for the cloud player can be found at https://www.dmcloud.net/doc/api/player-video_player.html
There is a working example at the bottom of the page: http://api.dmcloud.net/static/dmplayer/dmplayer-sdk.html
Anyway, I think you're missing the code you're refering to but I confirm you cannot control or interact with an iframe that wasn't created using the API.
Well it seems possible #Dailymotion, the iframe needs to be loaded with &api=postMessage, then you get a DOM reference to the iframe and do:
iframe.contentWindow.postMessage('play', '*');
And it works.
I'm having problems identifying playback restrictions of embedded YouTube videos when using YouTube Data API v3.
Example: YouTube ID k85mRPqvMbE and 3n4dXiagrZc seem to share same restrictions when it comes to embedded playback (in my case on an iPhone). The parameters I have looked at are "embeddable" in Video API and videoSyndicated/videoEmbeddable in Search API.
All the "obvious" parameters give the same results for both videos, but while I can play "3n4dXiagrZc" on my device without any problems, "k85mRPqvMbE" refuses to play due to content owner blocking me from watching it (playback through YouTube app or YouTube web works fine though). Please note that I have check the country restrictions as well and my country is not blocked for any of the two.
Any ideas on how to identify videos via the YouTube Data API v3 that are blocked for the reason stated above?
If you do a JSON query, http://gdata.youtube.com/feeds/api/videos?v=2&alt=jsonc&q=videoid you will get the video info. Here look for "embed:allowed", if present the video is embeddable.. Hope this helps! :)
I'm looking at embedding youtube videos onto a webpage (a Drupal webpage if that helps), but I need to figure out what people will see if their business/workplace/country blocks youtube access.
Does it show 'video no longer available', does it not show anything?, does it add a class or ID to the embedded html to let css, or a scripting language know that there is an error.
I would like to be able to swap the embedded code out for a gif or something else. So users that can't access youtube will not be left with what ever youtube decides to show them.
Any tips would be great.
I tried editing the hosts file to test myself but it wouldn't take for some reason.
Cheers.
EDIT: * first-question *
This can be achieved using javascript.
In your script call a resource that is located on youtube. Since it's javascript running in the client browser, the request will comes from it and not your website.
If the request fail, the client has no access to youtube.
Did I mention that relying on external resources you can't control is bad ?
I am working on a webpage where i have to include an embedded video.The video is hosted on some other domain.I am able to embed the video and autoplay once the web page is loaded.However i have a requirement where i have to remove the div displaying the video once it is played , and in place of the video i have to now display some text.
The problem is i am able to do autoplay by the autostart variable in the embed tag...but how do i know that the video has ended.The hosting company only provides an embed tag and they donot have any player apis to use.
One way (or rather a workaround) that i feel is to start a eventlistener in the background and see for the total time of the video and when that time is reached remove the content.But the problem is what if the user pauses the video, then also the div would be deleted.
I am new to flash.Are there some standard variables or actions that we can pass as flashvars to a swf file to stop a running player or to know the state of the player (Note we are only getting an embed tag from the video hosting site so we donot own that code and they donot have much documenation to help me out with the code).
Thanks for your help.
If you know that the content is a movie, and thus probably has a linear frame progression, you could use the Flash javascript API. Pseudocode for one possibility:
everyHalfSecond {
currentFrame = movie.TCurrentFrame("/");
totalFrames = movie.TotalFrames();
if (currentFrame + 1 == totalFrames) {
doMovieComplete() // switch out your div
}
}
WRT your undefined object variable, that sounds like standard browser Javascript issues. To resolve that, can use your own browser-specific "getSWF" function (see getFlexApp in this blog entry for an example), or you can use something like swfobject.