I'm trying to embed an HD YouTube video but no matter what I try, it only ever seems to load the 480p version.
According to YouTube, embedding an HD video is as simple as adding hd=1 to the URL:
<iframe src="//www.youtube.com/embed/{videoId}?hd=1" width="960" height="720" frameborder="0" allowfullscreen></iframe>
This, however, does not seem to be working, at least in my implementation of the iframe:
<iframe id="video-player" width="960" height="720" src="//www.youtube.com/embed/{videoId}?enablejsapi=1&autoplay=1&rel=0&modestbranding=1&showinfo=0&showsearch=0" frameborder="0" allowfullscreen></iframe>
The same is true with the Javascript API:
HTML:
<div id="video-player"></div>
JS:
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('video-player', {
height: '720',
width: '960',
videoId: '{videoId}',
playerVars: {
'controls': 1,
'autoplay': 1,
'hd': 1
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
player.playVideo();
}
Use this parameter:
vq=hd1080
Example:
<iframe src="https://www.youtube-nocookie.com/embed/SzTdgE04uA8?vq=hd1080" width="853" height="480"></iframe>
As per this answer on the YouTube support forum:
[The iframe embed] will attempt to "optimize" the experience and will work off
of the dimensions of the embed player to choose what quality to play
it back at by default.
If the embed is much smaller than 1280x750, such as 853x510 or 640x390, it will play 480p or 360p, regardless of whether the &hd=1 parameter is set.
(Emphasis mine)
I changed the dimensions of the iframe to 1280x720 and the video loaded at 720p resolution.
So, basically the iframe embed mechanism is intelligent and only loads the closest resolution according to the size of the iframe.
There is a trick you can do. Set the quality via JS. Its not guaranteed, but works on my site (ggreplayz.com):
https://developers.google.com/youtube/js_api_reference#Playback_quality
Example:
<iframe id="vid2" style="z-index: 1;" width="853" height="505" src="http://www.youtube.com/embed/<?php echo $vid2Array[0];?>?enablejsapi=1&wmode=transparent&hd=1" frameborder="0" allowfullscreen></iframe>
<script type="text/javascript">
...
function onYouTubePlayerAPIReady() {
player1 = new YT.Player('vid1', {
events: {
'onReady': onPlayerReady1
}
});
...
function onPlayerReady1(event) {
player1.setPlaybackQuality('hd720');
}
...
hd parameter has been deprecated: https://developers.google.com/youtube/player_parameters#Deprecated_Parameters
I use &hd=1&vq=hd720 for achieve that. It loads the 720p version even if the player is smaller. I got this information from this source.
I might be a little late, but I just discovered it only looks at the height of the video player.
When I try to embed a video 1000px wide, but only 408 pixels high (2.35:1 matte) it selects 360p >:|
After spending more than 5hrs searching and testing all the answers, the below code works for me.
Using Xcode 5, iOS 7.0.4 and iPad mini2.
- (void)viewWillAppear:(BOOL)animated
{
NSString *htmlString = #"<html><head>\
<meta name = \"viewport\" content = \"initial-scale = 1.0, user-scalable = yes, height = 640px, width = 360px\"/></head>\
<body style=\"background:#000;margin-top:0px;margin-left:0px\">\
<iframe id=\"ytplayer\" type=\"text/html\" width=\"640px\" height=\"360px\"\
src=\"http://www.youtube.com/embed/%#?vq=hd1080\"\
frameborder=\"0\"/>\
</body></html>";
htmlString = [NSString stringWithFormat:htmlString,self.videoId, self.videoId];
[self.videoPlayerView loadHTMLString:htmlString baseURL:[NSURL URLWithString:#"http://www.youtube.com"]];
}
The only important thing here is the aspect ratio that you set in your iframe (" width=\"640px\" height=\"360px\"), which are basically the ratios of 1280*720. And then set the same size for your UIWebView.
Hope this help someone.
Mine wasn't working at all. I tried everything including all these parameters
&hd=1&vq=hd720&quality=high
But it didn't work until I added this parameter:
&version=3
Related
All the image slider plugins I have used so far for Wordpress sites have had no way, as far as I could tell, to swap out different sized images at various screen sizes to enable an 'mobile first' experience.
For example: http://www.akqa.com/
They have changed which image is displayed depending on certain breakpoints and it allows control over which part of the image is displayed.
If there is no plugin to automate this, could it at least be achieved through CSS alone?
Thank you
You can do this by HTML picture tag or Jquery .data()
Jquery Example
orignalImg = $(".test").attr("src"); // get orignal image
mobileImg = $(".test").data("mobile"); // get mobile image
brakpoint = 768; //what ever your brakpoint
//do magic
function changeImg() {
$(".test").each(function() {
if ($(window).width() <= brakpoint) {
$(this).attr("src", mobileImg);
}else {
$(this).attr("src", orignalImg);
}
});
}
// call magic
changeImg();
//change image if viewport change
$(window).on('resize', function() {
changeImg()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Resize your window </h1>
<img class="test" src="http://placehold.it/600x300" data-mobile="http://placehold.it/300x600">
HTML Example
<picture>
<source srcset="http://placehold.it/600x300" media="(min-width:768px)">
<img src="http://placehold.it/300x600" alt="img">
</picture>
In your example link they are also using this <picture> tag. This is a simple solution but might be you will face browser compatibility issue
Basically, is there a way to make an image/div "invisible" in the sense that user click passes right through it to div beneath it in z-space?
Example is Youtube video in iframe, but want custom play button. Catch is that it must be user pressing the native play button that initiates play. It cannot be triggered via js api or any automated method. So... essentially need to have user see the image, but have it act as if it is not there when user clicks.
Any suggestions?
EDIT 04-22-2015
Regarding your comment:
We can read in the doc that player.playVideo() don't count toward incremental YouTube brand channel video views. Only the native button play will work for this.
In fact we can read on the doc :
player.playVideo():Void Plays the currently cued/loaded video. The
final player state after this function executes will be playing (1).
Note: A playback only counts toward a video's official view count if
it is initiated via a native play button in the player.
source: https://developers.google.com/youtube/iframe_api_reference#playVideo
This information is confirmed by the official YouTube support
Part: YouTube public play count
The YouTube Video Player allows masthead video views to count directly
toward overall YouTube brand channel video views. For the YouTube view
to count, the user must click to start the video using the standard
YouTube play button. Autoplay videos don't count toward YouTube views.
Part:Standard VS chromeless
The chromeless YouTube Player lets you customize features like player
controls, while still pulling in YouTube-served videos. Aside from the
standard play button overlay, clicks on the chromeless player's custom
control buttons don't count toward incremental YouTube brand channel
video views.
source: https://support.google.com/richmedia/answer/2566092?hl=en
So i made a new solution with function hide() and show() of Jquery. With this solution, the user will click on the native button player and if the video is not playing there is an image head-on.
You need to use the element, and not the API
HTML
$(".player-video").mouseenter(function() {
$('.player-video').hide();
$('#player').show();
});
$("#player").mouseleave(function() {
$('.player-video').show();
$('#player').hide();
});
Javacript
<iframe id="player" width="560" height="315" src="https://www.youtube.com/embed/l-gQLqv9f4o" frameborder="0" allowfullscreen style="display:none"></iframe>
<div class="player-video">
</div>
Im made you another live example: http://jsbin.com/luqewajuse/1/edit?html,js,console,output
END EDIT
You can use:
<div id="player"></div>
<button class="play-video">Play</button> //can be button or whatever
$(".play-video").click(function() {
player.playVideo();
}
EDIT 31/01/2015
Regarding your comments and what you trying to do, i make you a live demo to show you how it work :
Live demo : http://jsbin.com/jefubusejo/2/edit?html,js,output
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.player-video {
width: 600px;
height: 340px;
background-image:url('http://www.hqsoul.com/wp-content/uploads/2014/11/Mark-Ronson-Uptown-Funk-ft.-Bruno-Mars.jpg');
}
</style>
</head>
<body>
<div id="player" style="display:none"></div>
<div class="player-video">
</div>
</body>
</html>
Javascript:
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
$(".player-video").click(function() {
$('.player-video').hide();
$('#player').show();
onPlayerReady();
});
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'l-gQLqv9f4o',
events: {
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady() {
player.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
function myclick() { console.log("Click") }
#front, #back {
position:absolute;
top:10px;
left:10px;
border:1px solid black;
width:100px;
height:100px;
}
#front {
width:80px;
border-radius:30px;
z-index:1;
border-color:red;
}
<div id="back" onclick="myclick()" >
<div id="front"></div>
</div>
<p id='this-tag'></p>
The same page ( www.goo.gl/xLAhN ) has a youtube video embedded in size 640x390 in an iframe using the following code: (3 variations of youtube embed code were tried all with same results)
`<iframe id="player" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/GxTl1Ykbuww?enablejsapi=1&origin=origin-domain.com" frameborder="0"></iframe>`
The same page has one Adsense banner embedded in 250x250 in an iframe using the following code:
`<script type="text/javascript"><!--
google_ad_client = "ca-pub-xxxxxxxxxxxxx";
/* test */
google_ad_slot = "xxxxxxx";
google_ad_width = 250;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>`
100% of the time the youtube video displays at 250x250. Looking at the view source, the Youtube iframe now has a style element attached to it with 250x250 directive.
`<iframe id="player" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/GxTl1Ykbuww?enablejsapi=1&origin=origin-domain.com" frameborder="0" style="width: 250px; height: 250px;"></iframe>`
If the adsense code is removed , youtube video loads in correct size.
Please help, after 5 days I think this is either CORS related, but there is nothing online about this problem. Somehow adsense is allowed to overcome cross domain restrictions and inject the youtube iframe with the size of its own.
The problem had to do with jquery that was part of the theme that beautified iframes
var win = jQuery(window),
iframes = jQuery('iframe:not(.slideshow iframe):not( iframe.no_resize)',container),
adjust_iframes = function() {
iframes.each(function() {
var iframe = jQuery(this),frame_parent_w = iframe.parent().width(),proportions = 16/9;
if(this.width && this.height) {
proportions = Math.round(this.width / this.height * 1000) / 1000;
iframes.css({
width:frame_parent_w,height: frame_parent_w / proportions});
}
});
};
adjust_iframes();
win.smartresize(adjust_iframes);
After I added :not(inside iframe) to the second line (since Adsense always has their iframe wrapped in inside tags, everything rendered as expected with the above code ignoring the Adsense iframe settings.
I am working with a client. Their webpage is using this DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
I need to deliver content to pages on their site. My content looks like this
<div style="height:1000px">
<iframe frameborder="0" src="..." width="550" height="220"></iframe>
<br/>
<br/>
<iframe frameborder="0" src="..." width="550" height="220"></iframe>
</div>
I can place the content on the clients page by giving them a couple of lines of css, and, currently, and iframe:
<style>
.iframecontent
{
background-color:blue;
position: relative;
height: 100%;
width: 100%
}
</style>
<iframe class="iframecontent" frameborder="0" src="..." width="100%" scrolling="no"> </iframe>
Because the height of the content is dynamic, I cannot provide a specific height to the client - instead I need it to stretch.
I've read many posts, but am still not sure of the best way to do this. Possibly CORS? Something else?
Here is one solution offered: http://sly777.github.com/Iframe-Height-Jquery-Plugin/ - it works on the same domain, but for cross-domain talk it relies on PostMessage which is an HTML 5 thing.
I've tried http://blog.johnmckerrell.com/2006/10/22/resizing-iframes-across-domains/ but have not be able to get it to work.
I might just get the client to set the frame to 1500px so that it should fit whatever I choose to be in the content and be done with it, but is there a better way?
Could you just set the html,body{height:100%;} then your iframe{height:100%}?
A percentage height is directly dependant on it's parent's height (of a block element). ie: iframe is 100% of what? In this case, it's parent is the body.
You may use the postMessage Plugin http://benalman.com/projects/jquery-postmessage-plugin/
It enables you to post messages from inside an iframe to the parent element. In combination the the setInterval javascript function you may send the current needed size to the parent element.
Inside the iframe
var currentIframeSize = 0;
window.setInterval(function() {
var size = $('body').outerHeight(true);
//just post, if the size has changed
if ( currentIframeSize != size ){
currentIframeSize = size;
$.postMessage({if_height : size}, source_url, parent);
}
}, 1000); //do that every second
In the head section of the parent element
id = "theIdOfYourIframe";
$.receiveMessage(function(e){
var rec_height = Number( e.data.replace( /.*if_height=(\d+)(?:&|$)/, '$1' ) );
if ( !isNaN( rec_height ) && rec_height > 0 && rec_height !== current_height ) {
current_height = rec_height;
$('#' + id).height(rec_height);
}
});
Based on those two snippets, you should get your problem solved
I updated my plugin that you tried (http://sly777.github.com/Iframe-Height-Jquery-Plugin/) and i added tutorial how to use this plugin for cross-domain fix. I hope it helps.
I'm building a dummy widget for a iGoogle/Netvibes like portal. This is a "Google Maps" widget, as it only renders a map centered on a specific location.
The widget looks good in all browsers but IE8, in which the height I specify to the <div> that contains the map is not taken into account.
Here's the interesting part of the code:
<body onload="initialize()" >
<div id="map_canvas" style="height:400px; width: 100%;"></div>
</body>
I have no control on the portal, so the only thing I can modify is the widget itself. I also tried to set the height for the <body>, but same thing.
Any idea on why it's not working in IE?
Thanks!
Put this in the page you're calling with the iframe:
<script type="text/javascript">
var iframes = window.parent.document.getElementsByTagName('iframe');
for(var i = 0; i < iframes.length; i ++)
{
if(iframes[i].src == window.location)
{
iframes[i].style.height = '400px';
}
}
</script>
If you are on 2 different domains, this isn't possible, and unfortunately there is no other way when supplying the <iframe> directly to the end-user. The best solution would be to instead give the user a script tag that generates the <iframe> tag using a document.write()
Example script tag to give to your client:
<script type="text/javascript" src="http://www.example.com/widget-getter.js?client=[clientid]&widget=[widgetid]"></script>
Contents of the script that the above tag would call:
document.write('<iframe height="400px" src="http://www.example.com/widget.html"></iframe>');
Did you try using the height attribute of the iframe tag?