I am trying to figure out how to format a posted youtube link so that it embeds video but does so in a new browser window (the page auto refreshes every ten seconds, so embedding video directly onto the page is a problem. Also, I'm aware that it would be smarter to have the page update asynchronously, but I'm not there yet.)
So, for example;
1) A user posts the link https://www.youtube.com/watch?v=examplevideo. I can use a regex expression to change it so that it can be an embedded video on the page, but because of my limitation, I would need it to be an embedded video on a new page. So, instead, I would change this link to be;
2) http://img.youtube.com/vi/examplevideo/0.jpg. This image (standard syntax for all posted youtube video) would be posted on the page instead. In clicking this image, it would open a new tab or browser and start playing an embedded video for that new page. The syntax for the embedded video, consistent with this scenario, is;
3) <iframe width="560" height="315" src="//www.youtube.com/embed/examplevideo" frameborder="0" allowfullscreen></iframe>
So, I know that I can use "a href" syntax to add a link to the image so that anyone who clicks on it will be taken to the link on youtube. I'm assuming that a similar method would be used to point to a new browser page with the embedded video on it? How would this work?
Set the target attribute of the a element to _blank to open it in a new tab or window.
Example:
<a href="http://www.youtube.com/embed/zX54DIpacNE" target=_blank>Clicky</a>
Although IMHO it's better to just link to the youtube page of the video instead of embedding it since you are opening it in a new tab already.
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 have put a piece of code to play audio for my website like this
<audio id="audio-background" style="visibility: hidden;" controls autoplay>
<source src="/mp3/background-music.mp3" type="audio/mpeg">
</audio>
However, when users regularly visit my website, it keeps repeating annoying them. I want when the customer comes in and the audio turns on only once.
Anyone with any experience can help me make it up! Thanks
Since you don't have a loop attribute I'm assuming your users are hearing this everytime the page reloads, and perhaps at every site navigation.
If you included this tag in your main view, and the view refreshes when the user navigates to a child route (if you use php for routing for example, like wordpress does) it would reload the page and trigger the audio every time.
If this is the case, you may want to use localStorage (more on that here) to keep a record the user has visited the page and not include this audio tag for those who have already visited the site.
You can do that by doing something like this in javascript
window.localStorage.setItem('notFirstVisit', true);
and checking on page load:
let notFirstVisit = window.localStorage.getItem('notFirstVisit');
and then adding or removing the audio tag using javascript
if(notFirstVisit){
let audioElement = document.getElementById(audioElementId);
audioElement.remove();
}
Other options include keeping a php session and using php to include the audio tag or not, or using cookies.
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.
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'm trying to create a video pop-up that works on Apple devices and I've been playing around with fancyBox & some YouTube videos. Because YT uses Flash, this isn't going to work (which I am just now realizing)
Is there a way to open up an html5 video inside of this pop-up?
I already set that part up:
Here's the page where I'm already using fancyBox: http://legal-replay.com/video-test/
Please help!
<a class="iframe" src="http://www.youtube.com/embed/dP15zlyra3c?html5=1">Open HTML5 Video</a>
I don't know much about fancybox but it looks like you can just have it open any iframe you want, which will work with YoutTube's default embed method. Just pass html5=1 to the iframe.
From what I can tell scouting around stackoverflow, this is only supported for single videos, I don't know if you can force an entire playlist to use HTML5, that might still be a client-preference.
Source
Fancybox Howtwo