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.
Related
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>
New Squarespace, Vimeo, and iFrame user here. I'm doing some work for a non-profit, and they've asked me to create a "Testimonials" page with ~10 videos where the controls of each are revealed only on hover.
On load / inactive state
When the video loads, there shouldn't be any controls; sharing; or title/byline visible.
On hover
On hover, the user should see the player controls.
What I've tried
Given the basic iFrame embed code:
<iframe src="https://player.vimeo.com/video/58659769" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
✅?title=0&byline=0&portrait=0 gets rid of the title, owner name, and owner avatar of Vimeo accounts, regardless of paid status. This is a step in the right direction!
🛑?controls=0 gets rid of all controls for Pro+ videos, which is the desired start state. However, the only way to then play the videos is via autoplay=1: https://developer.vimeo.com/player/sdk/embed. This wouldn't work with multiple videos on the page. Also, we don't have a paid Vimeo account.
🛑Targeting the elements with a { display: none; } works when in my Dev Tools Panel after page load. However, I can't produce the same effect via the Custom CSS panel -- I suspect due to Vimeo server-side restrictions. (It hides the elements at first, then renders them after ~3 seconds.)
🛑I can't inject custom Javascript into the site via Developer Mode because we're only using the basic Squarespace, so all JS solutions are currently blocked. However, I may be able to get them to pay to upgrade Squarespace, so JS solutions are welcome!
🛑Injecting <script> tags into the embed modal doesn't execute the code
I know this would be possible from the Vimeo development side because the desired event happens when I've started to play the video. After pausing a video that has been playing, the controls disappear, and then reappear on mouse movement over the video.
The closest thing I could find was using Frogaloop (https://forum.webflow.com/t/play-vimeo-video-on-hover-from-a-cms-collection/78458). However, given JavaScript restrictions, I don't know how to execute something similar in Squarespace.
Credit
The video stills are just for testing, given that I know that it is uploaded to a user with a Vimeo Plus account. Thanks to Bianca Giaever! https://vimeo.com/58659769
I was able to connect with the folks on the #VimeoStaff Twitter account, who provided me with the following answer. TL;DR: what I'm attempting to do isn't possible, but there are some (suboptimal) workarounds.
As you've found, you can control settings individually (such as the
title and byline) within the Embed tab of your video settings page.
I'm afraid it's not possible to change anything mid-load in JS,
meaning you won't be able to load the player with no controls and then
activate them with a hover. We're so sorry for any inconvenience! I'll
be sure to extend this feedback to our product team.
It is possible to remove the playbar from your embedded videos. You
can enable this feature by adding the ?background=1 parameter to the
end of the player URL in your embed code, for example:
<iframe src="https://player.vimeo.com/video/76979871?background=1"
width="640" height="360" frameborder="0" allow="autoplay; fullscreen"
allowfullscreen></iframe>
Adding this parameter will have the following effect:
All player toggles and elements will be turned off (including the play/pause button!)
The video will automatically loop.
The video will be set to autoplay
The video will be muted
If you would simply like to hide the UI of the player without
muting/autoplaying/looping (i.e for a chromeless player), you can
alternatively add the controls=0 to the end of the player URL in your
embed code, for example:
<iframe src="https://player.vimeo.com/video/76979871?controls=0"
width="640" height="360" frameborder="0" allow="autoplay; fullscreen"
allowfullscreen></iframe>
When using the controls embed parameter, you'll need to either enable
autoplay (?autoplay=1), use keyboard shortcuts, or implement our
player SDK to start and control playback.
More information on background and chromeless videos can be found
here. Please note that keyboard shortcuts cannot be disabled
currently.
Additionally, I can see you've mentioned having multiple videos on one
page. If you have more than one video autoplaying on a particular
page, you will also need to include this parameter: autopause=0
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 need to track how much of an embedded youtube video the user has watched on my site. I need it to fire a tag at 25%, 50%, 75% and 100% of the length of the video. It should work similarly as a scrolling page track.
The only access I have to the site is through Googletag manager, so any solution would have to be through there.
I´ve researched and aparently there are ways to do this using youtube api. I even tried this step-by-step guide: http://www.cardinalpath.com/youtube-video-tracking-with-gtm-and-ua-a-step-by-step-guide/ But it didn´t work.
I guess the problem is that the site uses fancybox the play the video. Here is a pick of the website´s code:
I have no idea where to start.
Please take a look at
Track YouTube Video Playback with jQuery and Google Analytics Events
https://developers.google.com/youtube/js_api_reference
You need to track the current playback time, get the total playing time and then convert it to percentages.
Use the chromeless player and use the youtube js api. See the Playback_status method. I agree with putting a timer. However, there are methods and callbacks available at the js api that I highly recommended for you to use.
You will probably have to use
onStateChange event
getDuration()
getCurrentTime()
and you probably need those inside the onStateChange wrapper or something better.
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}
function onytplayerStateChange(newState) {
alert(ytplayer.getDuration()+ytplayer.getCurrentTime());
}
At the player state change, you may fire your own methods inside.
It's not a working example, but I hope that you get my answer. The modal / popup boxes is not related in getting the data needed. You just need to use the chromeless player and the YT js api working in harmony with your jQuery plugins. There are some jQuery plugins that is an API wrapper for multiple video sharing technologies.
Bower and Google is your friend!
http://bower.io/search/?q=youtube
Another option worth looking into, if YouTube is not your only options, I'm pretty sure both Vimeo and Wistia have these capabilities built in and are very simple to embed
what you can do is when getting the you tube video request the length of the video. Then divide that number accordingly to 25%, 50%, 75% and 100%.
You can attempt this by setting a timer at the same time the video plays and then calling the tag at the different times which were calculated before hand.
Hope this helps!
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.