I have tried every method that I've read about to embed a youtube video into my HTML5, but it will not work in any browser. The best I get is a square that says the website cannot be found. I've tried using the old embed code, I've tried using the iframe...I've also tried using the new video tag...I've dumped each one of the codes into their own separate part (meaning not contained in a div or anything like that)...The only thing that it is contained in is the body itself...I've also tried the opposite by putting all three of these methods in some sort of container like a div. Not that being in one or not being in one should affect it's playability, but I'm trying everything...I don't understand why it just won't work
You aren't showing what you tried that didn't work, but I'm feeling psychic today so here's a wild stab:
YouTube is currently giving out embed links that look like this:
<iframe width="640" height="360"
src="//www.youtube.com/embed/sLAEg5aTXAE?feature=player_detailpage"
frameborder="0" allowfullscreen></iframe>
What's unusual about this is that the URL -- in the "src" attribute of the IFrame tag -- does not specify a protocol.
The format of the src attribute above is a type of relative URL, called a protocol-relative URL, that allows the embed tag to work regardless of whether your page is being accessed with an http:// or https:// protocol. (You aren't allowed to mix these in a single page)
However -- and I'm guessing this is where you're going wrong -- if you open an HTML5 file locally, and not through a web server, it has a file:// URL. Because relative URLs -- including this oddball protocol-relative URL -- always take their unspecified bits from the current page location, the full URL that is being calculated is invalid:
file://www.youtube.com/embed/sLAEg5aTXAE?feature=player_detailpage
To fix, just change the src attribute to specify the protocol, changing the relative URL into an absolute URL that works from a page served with both file:// and http:// protocols.
<iframe width="640" height="360"
src="http://www.youtube.com/embed/sLAEg5aTXAE?feature=player_detailpage"
frameborder="0" allowfullscreen></iframe>
The drawback is that you can't put this on a page being delivered over https.
In the longer term you should get in the habit of testing from a real web server instead of a file URL. For a locally-installed test server, WAMP/MAMP is an easy and popular choice.
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 currently trying to embed using an iframe. The site I'm embedding (embed.embed.embed.com/) doesn't have a protocol (http or https) I'm not sure why this is but it doesnt operate if a protocol is established.
My website is https://www.example.com
<iframe src="//embed.embed.embed.com/"></iframe>
This would return https://embed.embed.embed.com/ (which doesn't work - returns a 404).
<iframe src="embed.embed.embed.com/"></iframe>
This would return https://www.example.com/embed.embed.embed.com/
What can I prefix the src with in order to direct it to a root domain, without assuming a protocol? Is there even a way of doing this? If not with an iframe what other methods might be recommended?
do you want like this,
<base href="http://example.com">
<iframe src="example.com"> </iframe>
I usually using an Iframe with src pointing to a HTML file containing an image:
Iframe
<iframe src="/image.html">
Image.html
<img src="/hello.jpg">
However, one time I accidentally used the image path in the Iframe
<iframe src="/hello.jpg">
And it still work perfectly. Is it a normal way to use this method? I am considering if there will be any inconsistent problem on different browsers / or does this method officially allowed in HTML.
Thanks.
I want to embed a YouTube video link in my web page with something like url://youtu.be. It's not appearing when I embed that in my web page. The below code, however, is working well (url://youtube without the dot).
<iframe width="420" height="315" src="https://www.youtube.com/embed/4pXUcxWLA7g" frameborder="0" allowfullscreen></iframe>
Why does using a "youtu.be" link not embed properly?
Because youtu.be is a URL shortening service. So when you go to a you.be URL, all it does is Redirect you to the full URL for a video.
Edit, actually that's not the complete end of the story. What happens when you do that is yes, it redirects you, but then the browser gives an error:
"Refused to display (video url) in a frame because it set
'X-Frame-Options' to 'SAMEORIGIN'."
So, this could work with redirection, but it doesn't because youtube sends down this response
header: x-frame-options:SAMEORIGIN
And so the browser refuses to display it because it's not the same origin (that is, it's not being served from the same domain). Why does youtube do this? That I don't know. But, basically, it appears you MUST you the youtube.com/embed style URL for iframe. If you have URLs in the youtu.be format (maybe in your database or something), then you will need to hit the youtu.be link and then see where it wants to redirect you to, and then use THAT link for your iframe.