According to the YouTube docs for the showinfo parameter:
Setting the parameter's value to 0 causes the player to not display information like the video title and uploader before the video starts playing.
So why does the title still show in the code below? Note that I'm not using any other parameters that could cause a conflict (e.g. modestbranding).
<iframe src="https://www.youtube.com/embed/fVH2lJeZVGU?showinfo=0">
Showinfo doesnot work like that.
Refer to the defined method help:
Setting the parameter's value to 0 causes the player to not display
information like the video title and uploader before the video starts
playing. If the player is loading a playlist, and you explicitly set
the parameter value to 1, then, upon loading, the player will also
display thumbnail images for the videos in the playlist. Note that
this functionality is only supported for the AS3 player.
Related
I'm embedding a video on my website from YouTube and I want it to loop. To do that I have to use the loop and playlist parameters. I do that and it generates a link like this: https://www.youtube.com/embed/MegurLP8PxI?playlist=MegurLP8PxI&autoplay=1&controls=0&rel=0&enablejsapi=1&start=312&loop=1&widgetid=55. So the loop parameter is set to 1 and the playlist is set to the video id MegurLP8PxI.
The issue is that when I initially load the video it shows the This video is unavailable error. Refreshing the page fixes that but that's not ideal. What makes it hard to understand what's wrong is that this only happens sometimes, seemingly at random. Happens with other videos too.
Another fix that I found is removing the playlist parameter from the url. However than the video will not loop, which I really need it to. Any help would be really appreciated.
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
Is there an official way to hide the title and the More videos section from a YouTube embed (latest version as of July 2nd 2018), and just show the YouTube logo bottom-right? I know the embed used to have this ability some time ago.
What I'm basically looking for is have the embed auto play with no other elements on it except the mandatory YouTube logo and be able to pause it, but no More videos appear when doing that.
For the showinfo option, the documentation currently says:
Setting the parameter's value to 0 causes the player to not display
information like the video title and uploader before the video starts
playing.
So that before clearly says that this does not take effect during the video play.
But is there any way to hide the Uploader, Title, Watch Later and Share buttons from the top part of an embed?
This is how it currently looks when the video is paused:
<iframe src="https://www.youtube.com/embed/dnmJLVWetQM?autoplay=1&controls=0&modestbranding=1&showinfo=0&iv_load_policy=3" frameborder="0" allowfullscreen="1" allow="autoplay; encrypted-media" title="YouTube video player" width="720" height="405">
Also the comment from here is not up to date anymore.
For the rel option, the documentation currently says:
This parameter indicates whether the player should show related videos when playback of the initial video ends.
So this too doesn't apply when the video is paused.
YouTube deprecated parameter showinfo (can no more hide title) and changed parameter rel behavior (will show related videos).
Details in https://developers.google.com/youtube/player_parameters#release_notes_08_23_2018
Note: This is a deprecation announcement for the showinfo parameter. In addition, the behavior for the rel parameter is changing. Titles, channel information, and related videos are an important part of YouTube’s core user experience, and these changes help to make the YouTube viewing experience consistent across different platforms.
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.