I'm loading few videos with iframe on a page. Those videos have custom high Quality thumbnails that we've uploaded in youtube. We have the player in 1280px wide and it for the most of the time it doesn't load the max res thumbnail, but it goes for a low quality thumbnail.
So far I've been unable to understand how youtube decides which thumbnail to load. For the last couple of days it was loading the high quality thumbnail in firefox & IE, but it was taking the low resolution for chrome. Today it is the same in all browsers -> it loads the low quality image.
If you want to see it for yourself here is the site:
http://wingtsun-akademie-heidelberg.de/new/
I've tried to force hd quality with the js iframe api:
player = new YT.Player(el, {
height: 1080,
width: 1920,
hd: 1,
events: {
'onStateChange': onPlayerStateChange
}
});
But it doesn't seem to have any effect? Do you have any idea if I can load a custom thumbnail by providing it to the player object?
Right now it seems that youtube loads most of the time:
http://i3.ytimg.com/vi/WqK2IlP-JSE/hqdefault.jpg
instead of:
http://i3.ytimg.com/vi/WqK2IlP-JSE/maxresdefault.jpg
Thanks in advance for any suggestions.
this is what youtube API states for maximum resolution thumbnails:
maxres – The highest resolution version of the thumbnail image. This image size is available for some videos and other resources that refer to videos, like playlist items or search results. This image is 1280px wide and 720px tall.
Important is the quote "available for some videos". So NOT at all EVERY youtube video serves a maxres thumbnail to third parties.
The reason for this is unknown. Seems as if the availability of maxres thumbnails comes randomly. I have hand-checked maxres thumbnails for several thousand youtube IDs and couldn't find a pattern. Some have maxres and round-a-bout at least a third of all videos checked just don't serve a maxres whatever the resolution of the video is. So one has to assume Youtube is willingly annoying third parties for a reason. You may speculate yourself why 'they' are doing this...one might think it's one of the easiest things to always generate a maxres pic for every video. But...they don't let their system generate them.
Your website seems to be using the right thumbnail now... I guess your problem is fixed?
YouTube recently changed the way thumbnail ids are retrieved. It is now using a key-value map rather than a list, which means you can now longer rely on the first one being this size etc... so maybe that was a problem with this, if you switched the API level from 2 to 3.
Related
We have the ability current to share current articles on our site by clicking on the sharing icon. This loads up a URL like:
https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwww.mydomain.com%2Fbuild-to-suit-leases-0419%2F
What's odd, is that the image that is loaded up from the OG:Image sometimes is very large while other times it's displayed as a small icon/banner layout. But in either case, the image is the exact same size and format which is used. The browser we use doesn't make a difference. I've also found that if I wait for the linked cache to clear and try to share the link again, it can give me a different layout.
Is there something else I can provide in that URL to specify the desired layout?
I think this was already answered here:
LinkedIn share requirements (BIG image)
But
Take a look at this link
https://www.linkedin.com/help/linkedin/answer/46687/making-your-website-shareable-on-linkedin?lang=en
So the recommended ratio of your image should be 1.91:1.
Do you have a working link for the URL you want to share?
I had problems before with it because we had something generating dynamic images and that was causing linkedin to display them little.
You can also add more meta tags to it like:
og:image:width - The number of pixels wide.
og:image:height - The number of pixels high.
More info about extra meta tags can be found here
http://ogp.me/
We're using a WordPress theme and we're facing a problem with images on our blog. On mobile view (or tablet view...maybe more, I'm not sure), it's showing "Could not load the image" when preview it (I'm using firebug). But when we check it by put link of image into browser address bar that's working good (so it's not the problem with missing image). This seems to happen with some images (responsive design problem !?)
Here is a screenshot
You can check this on our homepage (mobile view): ohiwill.com (the first article on Latest Explore Posts section).
Your images are loaded in via a srcset which will load certain images based on device resolution.
You are missing some thumbnail sizes.
You can see this one (1023px wide screens) exists:
https://www.ohiwill.com/wp-content/uploads/2017/11/legitimate-earn-money-online-1023x510.jpg
But the one loaded for sub 1000px wide screens does not: https://www.ohiwill.com/wp-content/uploads/2017/11/legitimate-earn-money-online-1000x500.jpg
Either the 1000x500 size got deleted, didn't crunch properly, or for some reason that's not being registered as a valid thumbnail size and you can add it back in using add_image_size()
I am trying to add a spotify music player to my website, a wordpress website. I tried with two different add-ons ,in one it was only available the widget player as a free option and the other one, give what I was looking for but I am not able to change the size of it.
The code is
[spotifyplaybutton play="spotify:album:6ttYxo44Qt6rC1z8ibKn9s" view=”coverart” size=”0″ sizetype=”compact” theme=”white”]
The only two sizetype available within the add-on is big or compact, in both cases I am getting the same size of the music player.
You can see how it looks like from the website, griotblues.com/music
Follow the approach mentioned here
You can specify the height and width of the player by setting the height and width properties of the iframe
I am trying to embed a youtube video in my wordpress site and I would like to start it at the beginning but display it at another point for visuals, is this possible? I have looked online and in the youtube api with no luck..hoping Im missing it.
Thanks for any help.
You can always embed the visual and then allow the video to play with the click through from the beginning. You can get the visual to be a pretty high dpi as well so the quality remains in tact.
Youtube only generates a few snapshots (around 1-3 snap images), there is no specific way to get an image at X point of time. It will be either a few seconds from the start, the middle and 1 other spot.
If you need to get the other format of the thumbnails, perhaps this can help
Google Json String Query for Video
As my posterous/twitter photo blog is reportedly going the way of the PC at the end of the month, I'm going to create my own. I don't want the page to take aeons to load, so I want to use small (in file size) images for the thumbnails but then, when a visitor clicks on it to view it full-size, show the "real" image (full-size, both from a screen dimension perspective and as to its file size), in a sort of reverse bait-and-switch.
So I reckon I'll need subfolders like:
Project
Images
Thumbnails
Fullsize
I imagine something like this is done a lot. Is there an accepted/"received" way to "minify" the images to use as thumbnails (some webby type tool), or will I have to save each photo at a smaller size, one by one?
My answer would seem to be the Lightbox jQuery plugin:
http://leandrovieira.com/projects/jquery/lightbox/
http://www.designyourway.net/blog/resources/30-efficient-jquery-lightbox-plugins/
Also, for automating the creation of thumbnails, see Irfanview's Thumbnail Viewer. See http://www.irfanview.com/ and http://dev.fyicenter.com/Interview-Questions/HTML/How_do_I_make_a_thumbnail_for_my_image_s_.html