I've got a full page Youtube video embed on a page and recently I've noticed it defaults to low quality. I saw this is a common problem that had different solutions at different points in time so I was wondering if anyone has any new tips?
I've tried setting the width and height of the iframe to 1920x1080 and adding &vq=hd1080 or &vq=hd1080p to the source url but none of these seemed to work.
Related
I need to play YouTube Videos with at least 720p resolution on my mobile tv web app, but safari plays them always with the lowest quality, that sucks.
I tried a lot of solutions that have been already posted, but they seem to be outdated. e.g. &vq=hd720, &hd=1, &vq=hd1080 appending to the embed iframe, unfortunately it's not working.
I also tried to do it with the youtube javascript api, what a surprise, no luck either.
Any other solutions I could try? The Videos are uploaded in portrait format 720x1280.
I ran into these exact same issues today and ultimately came up with a bit of a hack that worked for my specific needs. The trick is to double the size of one of the parent elements that's wrapping the iframe embed and then to scale it down again using a transform. For example:
.video-wrap {
width: 200%;
transform: scale(0.5);
transform-origin: left top;
}
Alternatively, you can also specify an exact width/height for it if you're trying to get exactly 360, 720, 1080, etc.
The only major downside to this "solution" is that it will also scale down the whole video player UI. In my case this was acceptable because there are other UI elements that allow the user to control the video.
I'm also only applying these styles to smaller screens based on css breakpoints, because the larger screens pull in the right resolution video regardless.
I really hope YouTube will eventually fix their setPlaybackQuality function, but in the mean time, I hope this helps someone out.
I want to write an extension for Chrome (as seems the easiest option) that would show notifications on top of a full screen video.
For example, say you're watching a Netflix video, the chrome recognises what video you're watching, checks databases for popups, and if it found some, it shows them at specific times (say when video is at 1:05 or something).
While most of the parts seem doable, main question is, how to display some HTML element on top of a video that is in full-screen mode?
Thanks a lot!
Edit
After some research and links provided by the answer, I could not find an answer for Flash players - I guess that is not (easily) possible.
However, as per my example, I tested Netflix videos, and whether it's fullscreen or not, a simple div with absolute positioning and high value for z-index was visible at all times. As many of the systems are now are or moving onto HTML5 video's, the simple solution should apply to all of them.
Thanks Marc Guiselin for helping.
I asked this a while back for my extension: Force a div to show up and overlay whatever is in fullscreen
The result was this: you can't on things like flash, however, I found out you can detect if an html element is in fullscreen in your content script using document.fullscreenElement||document.webkitFullscreenElement.
If it's null, nothing is in full screen, but if isn't, then you can append stuff to it while its in fullscreen.
Also if you want to do this, you might want to allow your content scripts to work within iframes using "all_frames": true in your manifest, since a lot of sites now use embeded iframe html5 players that can go full screen.
Good luck.
Ok, so its been a while since I've built a website, and I'm trying to blow out the cobwebs, so to speak.
I have built the following website: http://pinkgiraffecakes.tk/
As you may have noticed, it takes a long time to load the Title Bar. I am aware that you can pre-load images using Java and CSS, but the solutions provided all seem to be for use on other pages (i.e. pre load images on the home page so they are quicker to appear on other pages).
What I would like to do, is to pre-load the title bar and all the other associated images, store them to the cache, THEN show the homepage.
Is this possible? If so, could someone please provide sample code or a link to a tutorial on how to achieve this.
Thanks.
First and foremost, you should scale and optimize your images before resorting to lazyloading, preloading and shenanigan-loading. I ran pingdom on your site and almost choked.
The main title weights 3.5MB, but it can be optimized lossless to 185Kb
The facebook button weights 3.5MB too, and it can be optimized lossless to 68Kb.
I just shaved over 7MB from your home screen.
Besides that, you're serving 1280x720px images as 150px x 75px buttons. You really need to display a scaled version instead of using the raw image with fixed height and width.
I am trying to set up a HTML5 video player using video.js and Flat UI by DesignModo. I have the problem that I need to make the video player responsive, so the width needs to be 100%.
The problem is that then when this is set the height of the video is always the same as you can see in this fiddle. So what I need (I think) is a script which detects the aspect ratio as the aspect ratio will change. I found a script like that over here however it is designed for iframe videos like YouTube or Vimeo.
I attempted to modify the script by changing the value of $allVideos to $("video[class^='video-js']"), but it does not seem to have worked. Can anyone have a look at my Fiddle and try and tell me what's wrong and how to fix it?
By the way, I know that the links to the font files and image(s) are turning up 404, thats because at the moment the files are not hosted on my server, I have just been testing them locally.
Just remove the height: 100%; from .video-js .vjs-tech. And this take aspect ratio automatically from given width 100%.
I'm working on my company's website and we're embedding videos on some pages. We use Vimeo's custom thumbnail's feature but final rendition is ugly.
Does anyone know how to set a thumbnail on Vimeo vids without losing the original picture's quality ? I've heard of a javascript trick for example ?
Link on my website: http://radianceconseil.com/creation-sites-web-haute-savoie/
And here is the original picture : http://www.radianceconseil.com/images/sites-vitrine-accueil-Vimeo.jpghttp://www.radianceconseil.com/images/sites-vitrine-accueil-Vimeo.jpg
As you can see, there's a huge loss of quality!
Well the thumbnail is beyond your control (Vimeo is generating the image and they have chosen a low quality (it looks like high level JPEG compression), Vimeo says that they will serve a higher resolution thumbnails based on the embed size. However you can replace it with a locally hosted image called a "poster" if you use the HTML5 video tag or you can add the image and use some JavaScript to replace it with the iframe on click.