When using oembed to get embed codes for Youtube, I get this HTML:
<iframe allowfullscreen="" frameborder="0" gesture="media" height="270" src="https://www.youtube.com/embed/4B36Lr0Unp4?feature=oembed" width="480"></iframe>
Do you notice the gesture="media" HTML attribute? What is it? What does the "media" value do?
It’s a non-standard (or not-yet-standard) thing that’s so far only used for media autoplay in Chrome.
See https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#iframe:
Iframe delegation
Once an origin has received autoplay permission, it can delegate that permission to iframes via a new HTML attribute. Check out the Gesture Delegation API proposal to learn more.
<iframe src="myvideo.html" gesture="media">
Without iframe delegation, videos will not be able to autoplay with sound.
And see also https://www.chromium.org/audio-video/autoplay:
By default embedded IFrames will only be able to play muted or silent videos. However, if site owners wish for IFrames on their site to be able to play unmuted content, they may pass the autoplay permissions to the IFrame via the gesture=media attribute. This attribute allows any video contained in the IFrame to play as if it were hosted on the site.
Those things both cite https://github.com/WICG/gesture-delegation/blob/master/explainer.md, but that document’s author says the gesture name was only ever intended as a “placeholder” and that a Chrome Intent to Ship will go out soon with the real name of the HTML markup attribute being delegatestickyuseractivation. So you’ll instead need to do:
<iframe src="myvideo.html" delegatestickyuseractivation="media">
media - delegates user activation to the iframe in the context of media playback (ie. autoplay).
More here https://github.com/WICG/gesture-delegation/blob/master/explainer.md
Related
Is it possible to embed video into an email that will allow the viewer to watch the video within the email itself?
<iframe width="560" height="315" src="https://www.youtube.com/embed/wbY_Szw8X7Q" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
When I use above iframe code in my email template instead of the video it showing blank.
The answer, unfortunately, is that it's not possible. You need to:
Provide a link to the video source (in your case https://www.youtube.com/embed/wbY_Szw8X7Q)
Attach this file as an mp4 to the email itself.
It depends on the E-mail provider. Each provider supports different "HTML E-mails". Some support iframes, others don't. I would encourage you to Google which E-mail providers support iframes, and which don't.
Some pointers:
https://www.campaignmonitor.com/blog/email-marketing/2010/08/do-iframes-work-in-email/
https://www.simplycast.com/interactive-marketing-support/faqs/are-iframes-compatible-with-emails/
https://mailchimp.com/help/limitations-of-html-email/
https://www.experts-exchange.com/questions/21773969/IFRAME-in-a-mail-possible.html
Etc...
You must not embed a video because it is not supported by major email clients. You may however show a thumbnail image, with a link. Once they click on on the thumbnail "play button", it redirects to the link URL, and plays the video, in a browser.
I'm pulling instagram videos (urls) from the api and displaying them within an iframe. All works but I can't get them to not autoplay on page load. Inspecting the source, there's a video element with the autoplay attribute but I can't (as far as I know) do anything about it programmatically.
Is there a way to achieve what I want? I've tried decorating the iframe with autoplay="false", etc. with no success (I'm sure the video element takes precedence...).
I've never dealt with Instagram before, but a quick Google search led me to this article: http://thenextweb.com/facebook/2013/10/11/instagram-longer-lets-users-disable-video-autoplay-small-important-step-towards-ads/. It's from 2013, but it seems that you can't disable the autoplay function.
From my knowledge. You can't disable video autoplay using and <iframe>, but you can if you use <video>.
the best practice to post youtube videos on website is through using iframes or embed tag
<iframe width="420" height="345"
src="http://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>
or
<embed
width="420" height="345"
src="http://www.youtube.com/v/XGSy3_Czz8k"
type="application/x-shockwave-flash">
</embed>
my question is which is best practice for posting videos on site......
and what are effects on performance using both of them....
The new style is the <iframe>. For more information look here with this notification:
Please keep in mind, the mobile player cannot be embedded on external mobile sites.
I think it is always safe to use embed tags. Use of iframe in websites is a source of vulnerabilities. iFrames opens up window for hackers. For embed tag, there is no major security issues being reported.
Embed tag is much more effective, as we can handle different situation more effectively, like is player not supported etc...
Consider the following embed code of this video from Vimeo - Popular video hosting site:
<iframe src="http://player.vimeo.com/video/41321504?title=0&byline=0&portrait=0&color=c8c8c8" width="400" height="300" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
the video embed url(http://player.vimeo.com/video/41321504) does open, if open directly in new browser window but doesn't contain location of video anywhere in html source code, thereby preventing downloads,i guess this is a feature of flash DRM. But then, a third-party website comes in & was able to give the direct urls to same video
http://av.vimeo.com/42007/964/95995392.mp4?aksessionid=96d0b8ffbb4c0c04b1c6b7f1562de7d5&token=1343971749_85ce464ec3361604fbda75e38e29f4e8
From a programmers standpoint, i was wondering how does it work? how are these video downloaders able to fetch direct url of the videos which are not even present in html source? what is their process if anyone can explain that step-by-step.
They do server-side analysis of the flash object, which will establish a conection to download the video. That connection can easily be captured. That even works in a browser, with Firebug for example:
I don't want to embed Vimeo videos in Flash format. How do I embed them in HTML5 format?
On a browser with the Flash Player it loads in HTML5 mode with the following code:
<iframe sandbox="allow-same-origin allow-scripts allow-popups"
id="foo" width="100%" height="90%"
allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen=""
src="http://player.vimeo.com/video/28544156?api=1">
</iframe>
The sandbox prevents the HTML iframe tag from accessing any plugins including flash.
To allow the vimeo button to open the vimeo web page for the video you need the 'allow-popups' permission. It's not needed to play the video.
They actually enable HTML5 through cookies, so I don't think you can link directly to the HTML5 version. Here's the JS code they use to switch between Flash and HTML5:
function toggle_html5_player(obj, on) {
if (on) {
setCookie("html_player", 1, 365);
} else {
setCookie("html_player", 0, 365);
}
reload_page();
}
Edit:
Also on embedding, the official blog post states:
It only works on Vimeo.com right now, embed code will still be Flash
Edit 2:
Actually, that is an old statement which is not true anymore. The new embeds actually use HTML5 automatically on devices that don't support Flash like the iPad or iPod, if the aforementioned cookie is set.