A YouTube video is not being played due to copyright issue and gives a message as follows:
This video contains content from somebody, who has blocked it from display on this website or application.
Watch on YouTube.
Here is the JSfiddle for two videos, where one video is being played but the other is not:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<iframe allowfullscreen="" allow="autoplay; fullscreen" src="https://www.youtube.com/embed/UPLNXZQdGxo?autoplay=1" frameborder="0"></iframe>
<br />
<iframe allowfullscreen="" allow="autoplay; fullscreen" src="https://www.youtube.com/embed/6jiNS_4CEug?autoplay=1" frameborder="0"></iframe>
</body>
</html>
Is there a way to support playing such videos?
Video isn't available in my country/region
Some YouTube videos may not
be available in your country/region for the following reasons:
Video owners have chosen to make their content available only to
certain countries/regions (usually due to licensing rights) YouTube
may block specific content to comply with local laws
-- Youtube
Basically this means that the video isn't playable in your region. While it may become available in the future, currently you cannot do anything about that.
For future reference, this online tool checks if a video is available in your region.
Hope this answered your question!
the link you provided works for me. (I'm in Germany)
I think it is best to test your solution with different localization since I'm guessing YouTube is blocking it for you specifically for you. There might be plenty of reasons besides localization like age restriction etc.
Uploading Video to a different platform might help
Related
On my website, I have some OpenGraph metadata so I can customize the thumbnail, title, and description for when it is shared in social networks or messaging apps:
<meta property="og:title" content="Title" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://mypage.com" />
<meta property="og:image" content="http://mypage.com/path/to/thumb.png" />
<meta property="og:description" content="Description of my page" />
The other day, sending messages via Messages/iMessage on iOS, I found that some shared links (not from my site) play a muted video instead of an static image as a thumbnail (it seems to happen since iOS 10). Here is an example from an Amazon link:
Is there a way to specify that instead of using a static image as a thumbnail, the app should use a video? Either using OpenGraph tags or a different system. I tried using this, but it doesn't seem to work:
<meta property="og:video" content="http://mypage.com/path/to/video.mp4" />
Also, I haven't been able to replicate this effect in a messaging system different than iMessage (I tried with Google Chat, Skype, WhatsApp, GMail...) and I have only seen the videos when it's an Amazon link, but looking at the source code I don't see anything that indicates that a video should be taken or which one (there are several, iMessage picked the first one), and I haven't found related information online. Maybe it's something that only works between Apple and Amazon, I wonder if it's something that any site could use.
I was using the right tag (og:video), but the problem was the file size of the video.
According to Apple's "Best Practices for Link Previews in Messages" Technical Note, both og:video or twitter:player:stream would work to add a video preview to a message (emphasis mine):
Videos in link previews
Putting a direct link to your video asset in the Open Graph metadata is better than referencing an embeddable video page. With the direct link to video, Messages will load and display fast, and use the system user interface for video playback.
If the link preview machinery encounters a og:video or twitter:player:stream that points to a downloadable single media asset (for example, an MPEG-4 file) that can be played, it will attempt to download the video and automatically play it back.
Video that can be streamed but not downloaded (such as HTTP Live Streams or QuickTime Reference Movies) will still play inline, but require the user to tap to start playback. Video that requires embedding HTML or plug-ins will not play inline.
And at the bottom of the page, it is specified that there are some limits for the linked media, and in particular there is a limit of 1MB per resource that I was not following (emphasis mine):
Limits
All limits are subject to change at any point in time; use these only as guidelines.
Icons should be square, and at least 108px per side.
Images should be at least 900px in width.
Images less than 150px in width will not be used, or may be presented as icons.
The main resource located at the link is limited to 1MB. The total size of sub-resources (the icons, images, and videos which are selected as most interesting) is limited to 10MB.
First of all, please note that I searched for a SocialMediaStackExchange to ask this question on, but there doesn't seem to be one.
Here's what I'm wondering. When posting a tweet to twitter, if it is a youtube link or specific web site's link, then twitter will show an Expand functionality which the user can click to preview the media content right in the Twitter interface.
Does anyone know if this is determined by Twitter or if there is some way I can alter my web site to enable the preview on twitter?
I'd like to make it so when I tweet a blog entry that people can preview the first bit of contents of the article.
Here's an example: (simply adding the link, displays the preview content shown) In this case it is an article on InfoWorld.
There's a link on Twitter that explains Expanded Content, but not how to make it happen.
https://blog.twitter.com/2012/experience-more-with-expanded-tweets
You probably want to look at "Twitter Cards". They're really simple to set up. You add a few lines of code to your page's header, get your site validated (an automated process), and you're away.
Here, for example, is one of my tweets with "preview" content https://twitter.com/edent/status/516544061495193601
The extra HTML code is just:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="#edent">
<meta name="twitter:site" content="#edent">
<meta name="twitter:title" content="Tim Berners-Lee and the Freedom of The City">
<meta name="twitter:description" content="Last week, I had the privilege of being invited into the Guildhall to watch Tim Berners-Lee receive the Honorary Freedom of the City. I was one of a dozen bloggers and tweeters asked to live tweet th">
<meta name="twitter:image:src" content="https://shkspr.mobi/blog/wp-content/uploads/2014/09/TimBL-Least-Well-Dressed-435x375.jpg">
<meta name="twitter:image:width" content="280">
<meta name="twitter:image:height" content="150">
Different styles of cards have different sorts of previews - video, images, app installs, etc.
Also, I will point one important thing. For twitter:image meta its content parameter must be absolute path, not relative. Otherwise it will not work.
<meta name="twitter:image content="/resource/img.jpg"/> //will not work
<meta name="twitter:image content="https://yourdomain.com/resource/img.jpg"/> //will work
I have a collection of RSS feeds in my iOS app, and I need to get the main image to post alongside the title. The posts do not have any image or media:thumbnail elements to use. I have looked through all the elements that show up, and nothing else would give me an image or an image URL.
Is there any way to extract the main image of a page, or some other method, to get the thumbnail of the post?
Optimally, I would not want to have to load every single webpage to look at, because users on their data plan would not want that many pages loaded that they don't want to look at.
I am currently using KMXMLParser in my app.
Actually I think it's easy to look for Open Graph image in the page. Usually most of the news or blog sites follows open graph protocol. There will be a meta tag og:image in the meta data of the page. It's easy to fetch and analyse this metadata of the page rather than fetching the whole page and finding the big and small images.
As an example, the following is the Open Graph protocol markup for The Rock on IMDB:
<html prefix="og: http://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>
For more info on Open graph Protocol refer http://ogp.me/
Please remember that this won't work for all sites but most of the popular sites. So for those sites that dosen't follow this you have to find another way.
You could search for image URL's and then choose one of them (first you find?).
Most apps do that. Also I guess that's how Facebook chooses a thumbnail image when you share a link.
Alternatively you could download the images and choose the biggest, etc. Probably not worth the effort unless you pre-load images anyway.
I will be writing an application that uses the youtube API for videos. I want to integrate it with canvas. Is there anyway to make sure I get HTML5 compatible videos through the API calls?
In case you mean using <video />: the only way to embed YouTube-videos is <object /> or <iframe />. So, embedding via <video /> is not possible at this point and will most likely never be.
In case you mean validity: Both available options are valid in HTML5.
With the IFrame API, YouTube may use HTML video instead of Flash, but this can't be set manually. See this.
I have to create a bunch of these "Share this on" Technorati, Digg, Facebook, Reddit, del.icio.us, StumbleUpon, MySpace and so on. It is very easy to find online icons for this task, but it is a little more difficult to find what URLs I should link.
Is there any updated list of all these services? Of course I could copy them from other sites having this, but I am not sure they are updated, and moreover maybe there is some GET parameter I want to set differently.
EDIT: I do not really care for services doing this for me, I just need the addresses. Among the reasons I do not like the external services is the fact that I can't customize the buttons.
Try AddThis - it is a free service that allows you to embed a ton of these things pretty easily.
You should not reinvent the wheel. There are plenty of tools that already do this, as well as keeping the information up-to-date for you.
http://sharethis.com/ is the first one I found on Google.
AddThis and ShareThis have +350 ways of sharing links to your site.
If you don't want to depend on them, I'm afraid you do have to reinvent the wheel.
Check out the API:s of FaceBook and Twitter to start with.
Then continue with the rest, or surrender to AddThis.
On Facebook's developer pages (link above), it's very easy to find this example (which I assume is what you want, but for all social networks):
<html>
<head>
<title>My Great Web page</title>
</head>
<body>
<iframe src="http://www.facebook.com/plugins/like.php?href=YOUR_URL"
scrolling="no" frameborder="0"
style="border:none; width:450px; height:80px"><iframe>
</body>
</html>
Have you inspected the javascripts from AddThis and ShareThis yet?
Good luck!