I have the responsive video embed code on my website. It uses an iframe.
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/xxxx" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
It's working as intended, but I was wondering if there was some way to change the appearance of the timecode, so it's 0:00 before the user hits play?
Right now it looks like this:
timecode
Do you know of any javascript or something else that can make it show as 0:00 to start? if not, is there some way to hide that bubble before the user presses play? I'd like them to be able to still fast forward and rewind and everything else.
As the player is a Vimeo-controlled iframe this isn't directly possible.
Other options might be:
Hiding all controls until playing has started, and enabling playing via the SDK (see comments on 'controls' param here);
Using something like https://plyr.io/ instead of the Vimeo player.
Related
I'm trying to embed vimeo videos as iframes. I'm using the following code:
<iframe width="1140" height="570" src="https://player.vimeo.com/video/553469759?autoplay=1&dnt=1" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
It works fine when I paste it in a codepen or try it in firefox. It doesn't work in chrome for me though. When I inspect the iframe's HTML, I can see that vimeo adds a class no-fullscreen-support, it also added these classes though:
js-player-fullscreen
with-fullscreen
Figured it out on my end. It was due to the Permissions-Policy being set by Nginx in the header. In my instance of Nginx, it was originally set to this:
add_header Permissions-Policy "geolocation=(),midi=(),sync-xhr=(),microphone=(),camera=(),magnetometer=(),gyroscope=(),fullscreen=(self),payment=()";
The culprit in this case was fullscreen=(self) -- it was telling Chrome that unless the code originated from the site, it shouldn't allow full screen. As Vimeo's iframe is being loaded from player.vimeo.com, Chrome saw that as a third party and wouldn't allow it. Removing that from the Permissions-Policy so it looked like this:
add_header Permissions-Policy "geolocation=(),midi=(),sync-xhr=(),microphone=(),camera=(),magnetometer=(),gyroscope=(),payment=()";
Resolved the problem. The button is showing fine now.
For those using Apache, it'd probably look like this:
Header always set Permissions-Policy "geolocation=(),midi=(),sync-xhr=(),microphone=(),camera=(),magnetometer=(),gyroscope=(),fullscreen=(self),payment=()"
The same principle applies, just remove fullscreen=(self).
You might also see it mentioned as Feature Policy, same thing, it's just called Permissions Policy now.
You can learn more about Permissions Policy here: https://github.com/w3c/webappsec-permissions-policy/blob/main/permissions-policy-explainer.md
From Vimeo Help Center:
The fullscreen button will be hidden from the player in scenarios where fullscreen mode cannot be activated. Here are some common causes:
First and foremost, check the Embed tab. Make sure the fullscreen button is toggled on under the Controls section
The iframe embed code is missing the fullscreen attributes: "mozallowfullscreen,""webkitallowfullscreen," and "allowfullscreen." If you’re pasting your embed code into another application, make sure these values are being retained.
The player iframe is contained within another iframe that is missing the fullscreen attributes. Browsers do not allow iframes to enter fullscreen if they are contained within other iframes without these fullscreen attributes. - Try inserting the player outside of the container iframe or adding "mozallowfullscreen," "webkitallowfullscreen," and "allowfullscreen" to the container iframe.
The iframe is contained within a frame. Frame elements cannot enter fullscreen, and neither can any iframes inside of them. We recommend removing all frame tags from your page’s source code.
If you're not sure if the above cases apply, please contact us, and we’ll investigate further. Be sure to include a link to the page where the video is embedded, so we can take a closer look at your page's source code.
You should add these tags to the element:
webkitallowfullscreen mozallowfullscreen allowfullscreen
what if you just download the video and upload it somewhere like github?
And then use the tag to embed the video?
<video src="protocol://someurl.domain/path" muted autoplay width="1140" height="570"></video>
If vimeo doesn't allow downloading you can always use third-party tools like savethevideo.com
I've tried multiple times to send out an email trying to get the YouTube video to appear within the email but however, I've had no luck.
I get this back:
I've tried using iFrame but turns out it doesn't support Gmail.
<iframe width="560" height="315" src="https://www.youtube.com/embed/w_Da75XbPBs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
I'm trying to replicate what Youtube uses when it sends out subscription emails containing the video link.
I've also tried object and embed but neither of them appear when I send the email out.
edit; I'm trying to replicate this (the portion in red redirecting to Youtube if clicked on):
The world of coded emails is an interested one.
For starters, you can't send javascript elements through an email, for security reasons, I'm sure you know this but I wanted to cover my bases.
Also, consider what css you're using. Emails can only support a limited number of css options and all css must be inline (you can't use the element). Also maybe read up on email support for html and css as a whole (check out this super awesome link).
It looks to me as though YouTube isn't actually embedding the video, which others have mentioned (at least, they aren't embedding the videos in the way we are used to). Rather they are taking the thumbnail image from their database and then stylizing it (with video length and such) to make it look like an embedded video.
While you don't have access to the YouTube thumbnail database, I'm assuming you want to send links of your own videos to others? Just host the thumbnails, of whatever videos you want to send, on your server and then link to it with a simple '> and then use some styles.
Playable video in email isn't well supported. If you're looking to mimic YouTube's own implementation of a video link, make a larger thumbnail of the video, maybe overlay the play button and link the image directly to the YouTube link.
Try using Outlook if you can. Below are step-by-step instructions.
Click on the quick access toolbar and select More Commands
Choose Attach File
Click the Add >> button, then select Attach File
Select your HTML file
Then, instead of just hitting done, make sure to change Insert to Insert as text
Then, Outlook will format your email. However, Outlook will ignore the <iframe> element.
So if you really need it, try this Chrome extension.
Source: https://www.linkedin.com/pulse/how-insert-html-source-code-outlook-emails-maurizio-la-cava/
It depends on email client. I doubt if any support video-embedding directly into email document due to security reasons. I suggest you to use Image instead. Create a Video thumbnail image, and make it a hyperlink to your video.
The closest thing you can do (to my knowledge) is to attach the video. If you insert the video link, it will send the video as an attachment which can be watched from within the email. Apologies if this isn't what you want, but I don't think there is a better way.
I'm using the following iframe in my HTML code:
<iframe src="<iframeurl>">?autoplay=1" frameborder="0" allowfullscreen></iframe>
On iPhone with iOS10 this doesn't autoplay. I'm getting the red play button and stuff. On windows chrome and others all works fine autoplay starts correctly. But not with the iphone.
Is there anything I could do in javascript or by manipulating the URL to make this autoplay? I'm aware that Apple used to disallow autoplay before iOS10 so maybe I'm doing something wrong here..
You're experiencing this because Apple doesn't allow embedded media to play automatically — the user always initiates playback.
This is mentioned in YouTube's IFrame Player API documentation as well. And no, I don't think you can and should override this since that is a bad practice.
Just add the play trigger to onClick and then execute call the click event from an AJAX response.
Should do the trick ;)
It is not that iOS prevents any video from autoplaying (at least not so since iOS 10), but it is unmuted videos that are prevented from playing without user interaction. So if you embed a YouTube video with muted=1 appended to the URL, autoplay works again.
P.S. the muted parameter is not documented for the YouTube embedded players. It is nowhere to be found in the official doc: https://developers.google.com/youtube/player_parameters. Yet it has been working for quite a while. If you worry it may not work someday, you can take the programmatic approach via the iframe API: first mute the video and then play it when the ready event is emitted.
putting this in config.xml worked for me:
<allow-navigation href="*://*youtube.com" />
i need some help. I have seen on many different websites that they have changed the color of the youtube video menu.
this one
i dont know how to change the color.
my code.
<iframe width="760" height="428" src="https://www.youtube.com/embed/92HOgzQvtOw" frameborder="0" allowfullscreen></iframe>
if you know how to change color please write a comment i have been searching everywhere and i have not found an asnwer. hope i can get one here :)
thank you
EDIT: This answer is deprecated since YouTube has changed how their player works. I'll try to update this answer when I can.
You can change it by specifying color when you embed a Youtube video as mentioned in their documentation here.
color (supported players: AS3, HTML5) This parameter specifies the
color that will be used in the player's video progress bar to
highlight the amount of the video that the viewer has already seen.
Valid parameter values are red and white, and, by default, the player
will use the color red in the video progress bar.
Unfortunately it seems AS3 and JavaScript are deprecated now so you will have to use the Youtube Iframe embed API. They have documentation I linked about and I believe you would go about setting up by simply making the embed link have the color parameter i.e.
https://www.youtube.com/embed/M7lc1UVf-VE?color=white
<iframe width="560" height="315" src="https://www.youtube.com/embed/M7lc1UVf-VE?color=white" frameborder="0" allowfullscreen></iframe>
If you want a CUSTOM color... I believe the only way is creating a custom progress bar (along with all the video controls because the two are tied together. That is a little more extensive. I feel they purposely they did this so the player can stay true to the original brand. You can however do something with the API because you have access to player.getVideoLoadedFraction() and player.getCurrentTime()
Playback status
player.getVideoLoadedFraction():Float Returns a number between 0 and 1
that specifies the percentage of the video that the player shows as
buffered. This method returns a more reliable number than the
now-deprecated getVideoBytesLoaded and getVideoBytesTotal methods.
So if you really wanted, you can customize your own progress bar by feeding it in values with JavaScript.
Try to add ?theme=light to the YouTube URL.
I googled a little bit and found this website: https://www.reembed.com
And here's even more help. It seems that you might have to use the YouTube API to get what you want: http://tutorialzine.com/2010/07/youtube-api-custom-player-jquery-css/
Maybe that could help you out?
I would like to embed a youtube video (with the standard iframe). Can I ensure that the video is played in the youtube app, if it is clicked on using a smartphone?
For completeness my video including code (using bootstrap 3.3.1.):
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/<?php echo $Elem->video; ?>">
</iframe>
</div>
Thank you
I'm just trying to do the same thing and I can tell you that there is no native way to specify that behaviour as a parameter.
The only workaround (I'm still trying to implement it) is to use YouTube's Player API for iframe. I think you should use that API to embed the video on the webpage and add a listener to the first "play" event, in that event you should check if the user is using a mobile device (using another JS library to check that) and stop the playback (the stop() API call will also stop the loading of the video file) and then redirect the user to the video URL (like youtube.com/xxxxxx). At that time, at least in Android, the user will be asked to open the link in the browser or the YouTube app. I think most user have the app as the default option.
That's the idea, I'll try it and if it works will edit this response with the code I've used.
This is the link where you can read about embedding the player, it's events and API calls: https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player