Vimeo: How to activate captions by default? - vimeo

We have embedded player on our site.
VTT French captions were been uploaded.
We need the captions to be activated by default.
Currently its not happening. The captions are available, CC button is there, and we can switch them ON while playing. But we do want the captions to show automatically.
The embed code is as follows:
<iframe class="embed-responsive-item" src="https://player.vimeo.com/video/[videoid]?texttrack=fr" frameborder="0" allow="autoplay" allowfullscreen></iframe>
According to Vimeo' docs texttrack=fr is what should make the captions to show automatically.
The video has language set to English.
Any idea on how to solve our problem?

I was able to find an answer.
For those who faces the same issue: make sure that language in the embedding code matches the language selected, when captions were uploaded within Vimeo.
Embed code we had was texttrack=fr, but captions were uploaded as Language - French (Canada).
We changed to texttrack=fr-ca and all is good now.
You may also need to play with type of data you upload: Subtitles or Captions

Just wanted to add that at this point in time, Vimeo language variables are case-sensitive and "texttrack=fr-ca" does not work. But "texttrack=fr-CA" does work. Vimeo has identified this as an issue and may make the variable non-case-sensitive in the future.

Related

Embedding Youtube Video in Email

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.

How to fix embed code to display video cleanly/properly?

I am trying to embed a video onto my website but having difficulties with the standard embed code.
Here is a link to my webpage:
https://southhemitv.com/2019/07/08/test-jul-9-2019/
The standard embed code displays a very small video player with large black borders. Adding height="500" improves the size but then some extra features are added such as the chinese text at above the video.
I would like to hide this extra text so viewers only see the video and the player controls. (Edit) It has been suggested i store the video on my own server but i am not able to download certain videos and because its expensive most websites embed videos rather than store them on their server
If anyone could help it would be very appreciated.
The original embed code:
~<iframe src="//player.bilibili.com/player.html?aid=13125324&cid=21539921&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>~
Link to original video:
https://www.bilibili.com/video/av13125324/
Many thanks
Download the video, then serve it from your own server or via CDN, use a videoplayer that you like and supports your video filetype.
The apparent issue here is the player's graphical interface.
Since you fetch the video from a website, it uses that website's video player (I think?).
In any case, just manually download the video & use the video player of your choice.

how to play embed OneDrive video on my end?

Not really sure if I can ask this so I hope its ok. I have my site where I would like to embed and play video which is stored on OneDrive cloud service. So far it sounds easy, however here's the thing: while I am actually allowed to embed it via provided embed iframe code, it can't be played unless its redirected on OneDrive site. I did my research all over the internet but it looks like dead end and no one really solved this mistery. This is what I got:
Official embed link:
<iframe src="https://onedrive.live.com/embed?cid=5FAC7D8A540D1B7A&resid=5FAC7D8A540D1B7A%21141&authkey=AM3Y3EuRuTPbKo0" width="320" height="240" frameborder="0" scrolling="no" allowfullscreen></iframe>
This embed is not playable from my site. after I press Play button it will redirect me to:
https://onedrive.live.com/redir.aspx?cid=5fac7d8a540d1b7a&resid=5FAC7D8A540D1B7A!141&parId=5FAC7D8A540D1B7A!140&authkey=!AM3Y3EuRuTPbKo0
then here:
https://onedrive.live.com/?cid=5fac7d8a540d1b7a&id=5FAC7D8A540D1B7A%21141&sff=1&authkey=!AM3Y3EuRuTPbKo0
and finaly here where I can play it:
https://onedrive.live.com/?authkey=%21AM3Y3EuRuTPbKo0&cid=5FAC7D8A540D1B7A&id=5FAC7D8A540D1B7A%21141&parId=5FAC7D8A540D1B7A%21140&o=OneUp
Official share link:
https://onedrive.live.com/redir?resid=5FAC7D8A540D1B7A!141&authkey=!AJVBaVimMA1e0cc&ithint=video%2cmp4
From this I found a way how to create direct download link by changing redir part with download:
https://onedrive.live.com/download?resid=5FAC7D8A540D1B7A!141&authkey=!AJVBaVimMA1e0cc&ithint=video%2cmp4
It can be put into <iframe> or <video> but it still can't be played. Also is possible to change redir to embed:
<iframe src="https://onedrive.live.com/embed?resid=5FAC7D8A540D1B7A!141&authkey=!AJVBaVimMA1e0cc&ithint=video%2cmp4" width="320" height="240" frameborder="0" scrolling="no" allowfullscreen></iframe>
which is pretty much same as official embed link. Then there are also strings like: &em=2 and &Embed=1 (not really sure what they stand for, but they do change redirected output) Example:
https://onedrive.live.com/embed?resid=5FAC7D8A540D1B7A!141&ithint=video%2cmp4&em=2&Embed=1
From what I understand these listed strings can be always skipped:
?cid=5FAC7D8A540D1B7A
&authkey=AM3Y3EuRuTPbKo0
&ithint=video%2cmp4
&id=5FAC7D8A540D1B7A%21141
&parId=5FAC7D8A540D1B7A%21140
&o=OneUp
With this, I am at point where embed is not embed at all. Its like new word to "redirect me to OneDrive and play me there". Ofcourse I also tried to get help at OneDrive support, but they play stupid! and keep asking me why would I need to play my video on my site when I can play it on my drive just fine. Apparently they mocking me. I am not really tryin' to use them as my ftp server (and even if I would its not their bussines till I violate their code of conduct), I just want to play my embed video on my site like I would with Youtube, Vimeo or Dailymotion. (Well, to be honest it wouldnt bother me so much if I wouldnt already purchased 2TB storage)
I in the end I looking for "true embeding" or at least "direct link" like I found when it comes to images: http://1drv.ms/1PbOhF8 where direct link is: https://u6gkqq.dm2303.livefilestore.com/y3mtdqmTctG9LFmZ_HLl1tYgUkWTiB8xkCZ0-nOKP2_SLzkuVXtzJzhavaA8axBWlqrVezVbDjA4bO-8AJjbVSp_Yc3luKWSiMVuhvRhnvYFie_FfOEQldmztKVtOlxGrG18AIftsAbOwfXORrB8TZ1EPZYFmKQ6KfmA8Q2TWqStxE/%D0%9D%D1%8C%D1%8E-%D0%99%D0%BE%D1%80%D0%BA-%D0%B0%D0%BC%D0%B5%D1%80%D0%B8%D0%BA%D0%B0-%D0%BA%D1%80%D0%B0%D1%81%D0%B8%D0%B2%D1%8B%D0%B5-%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B8-Tilt-Shift-2344711.jpeg?psid=1
I mean, there must be a way how to actually get direct link of stored file even if its video, right?
I even tried to insert video into my desktop MS PowerPoint 2013 and then upload it on OneDrive, get embed code, place it on my site and play it on my site. Problem is that such embed presentation can be viewed only by me and also only outside of fullscreen mode (entering into fullscreen will lead to redirect on OneDrive again). Here I attach share link + embeds:
http://1drv.ms/1Z33Xox
Embed from online OneDrive storage:
<iframe src="https://onedrive.live.com/embed?cid=5FAC7D8A540D1B7A&resid=5FAC7D8A540D1B7A%21143&authkey=AMrmlVIx_LeyX_g&em=2" width="402" height="327" frameborder="0" scrolling="no"></iframe>
Embed made from embeded embed:
<iframe src='https://onedrive.live.com/embed?cid=5FAC7D8A540D1B7A&resid=5FAC7D8A540D1B7A%21143&authkey=AMrmlVIx_LeyX_g&em=2&wdAr=1.7777777777777777&Embed=1' width='402px' height='327px' frameborder='0'></iframe>
Now, interesting is that for playing this presentation is used native HTML5 player. While on "share link" right-click menu is disabled (with oncontextmenu="javascript:return false;"), but while in embed mode, right-click menu is enabled however there is missing fullscreen on controls (allowfullscreen). Unfortunately video cant be saved or opened in new tab, because it will trigger downloading of some "mediahandler.ashx" file which is infact my video file with renamed extension! This is the address:
https://powerpoint.officeapps.live.com/p/mediahandler.ashx?PV=6&PF=5&Fi=SD5FAC7D8A540D1B7A!143&C=5_810_DM2-SKY-WAC-WSHI&ak=t%3D0%26s%3D0%26v%3D%21AMrmlVIx%5FLeyX%5Fg&z=257&usid=9992f846%2D2470%2D4a99%2Da07d%2Da26ffa761de7&Rid=2041958409%2Emp4%2Emedia&waccluster=DB3B&retries=3
which will redirect here and trigger download of ashx file -
https://powerpoint.officeapps.live.com/p/mediahandler.ashx?PV=6&PF=5&Fi=SD5FAC7D8A540D1B7A!143&C=5_810_DM2-SKY-WAC-WSHI&ak=t%3D0%26s%3D0%26v%3D%21AMrmlVIx_LeyX_g&z=257&usid=9992f846-2470-4a99-a07d-a26ffa761de7&Rid=2041958409%2Emp4%2Emedia&waccluster=DB3B&retries=3
any ideas, please ?
use video tag and in src attribute use the src value of iframe and change embed to download.Hope it will work.try it.
<video controls width="360" height="240">
<source src="https://onedrive.live.com/download?cid=5FAC7D8A540D1B7A&resid=5FAC7D8A540D1B7A%21141&authkey=AM3Y3EuRuTPbKo0" type='video/mp4'/>
</video>
I clicked on your Official Share Link and in the top menu there is an item for "View Original" which, after clicking, takes me to the direct download link:
https://u6eqtg.dm.files.1drv.com/y4mFkEomS8JzzREaa-IhXyseplbhCfA84Z6hcTSQXf84jFDR5_9J1PSSulKVzZqfLBs_wGqombsF45k4k3P_pZky7a1t0XOPEduQFQlhog8VshPfMzcue76CBDxU_Uz37zFAadc5gkokilYAHz5iq_FCSbgV6ago5AP8Vj5bkEb_37O5LwIooZAEQtOwa89zcAH12SNGGnW5kDX_2buZxcZbxAzOzfgPOVZHCMbkjZsr5Y/Pilobulos_Symbiosis_2005-480p.mp4?psid=1
By the way, if you have a folder full of files that require a direct download URL, I found that this answer is useful for grabbing all the direct links in a shareable folder.
Came across this which worked https://blog.omaration.com/embedding-videos-from-onedrive-into-your-blog/
Basically: take the embed src= value and use that in your HTML5 video src=, but change ?embed to ?download.

I would like to know how can I add an image in html when you load a vimeo video?

I would like to know how can I add an image in html when you load a vimeo video ?
Any informartion, links related or codes are welcome.
Thank you!!!
I guess you are talking about how to add a poster-like utility for Viemo videos, as done trough the poster HTML attribute when placing HTML5 videos.
Well, there's no such an option, as far as I know. When Vimeo is not active (as it has not been played yet) the video's thumbnail image is displayed, and when Vimeo's video is loading, it shows it's own loading animation.
Anyway, you can select your custom image when uploading your video on Vimeo, so, at least, by this way you can define what will be showing by default your custom player.

html change color on youtube video

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?