I'm trying to get Chromecast Ultra to display a 3840x2160 web page. It has no problem when the content is a simple IMG but when I try an iframe or some more complicated HTML it crops it down to what looks like the top left but less than a quarter of the whole screen.
I tried Casting (mirroring) from a Chrome tab of the same website that gives me what looks like 1920x1080. A simple image shows full res.
<html>
<head>
<script type="text/javascript"
src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js">
</script>
<style>
body {
display: block;
margin: 0px;
color: #f0f000;
background-color: #ff00ff;
width: 100%; //this is important
height: 100%; //this is important
}
iframe {
width: 3840px;
height: 2160px;
min-width: 3840px;
min-height: 2160px;
}
</style>
</head>
<body>
<!--<img src="EdAGGFS.jpg" width="100%" height="100%" frameBorder="0">Browser not compatible.</img>-->
<iframe id="test" src="https://sorrycantshowyou.com" width="100%" height="100%" frameborder="0" scrolling="no" allowfullscreen="true"></iframe>
<script>
const context = cast.framework.CastReceiverContext.getInstance();
const options = new cast.framework.CastReceiverOptions();
//options.maxInactivity = 3600; //Development only
options.disableIdleTimeout = true;
context.start(options);
</script>
</body>
</html>
I'm plum out of ideas to test any further. I can't find any reference that gives Chromecast Ultra specs for HTML content. I am just assuming it should be capable of 3840x2160 like video or images. Am I wrong? Maybe Chromecast's processor is not up to rendering HTML that big so it crops it instead?
That is an expected behavior for Chromecast.
Note: Images have a display size limitation of 720p (1280x720). Images
should be optimized to 1280x720 or less to avoid scaling down on the
receiver device.
Also, it was mentioned in one of the Chromecast product review online.
The Chromecast 2 displays content in Full HD 1080p resolution – that’s
1,920 x 1,080 pixels. Regardless of whether you have a Full HD or 4K
TV, you’ll still only be able to watch 1080p footage. And if you have
a 720p HD TV, the content will be downscaled to 1,280 x 720 pixels.
Related
I am building a responsive website that has an embedded youtube video on it. The video is in a responsive iframe and works perfectly fine in all browsers except in Firefox. There it simply doesn't show up.
I tried savemode, adding html5 to the link, commenting all js and js-queries out. If I add the width and height in px it does show and works fine, but then it's not responsive.
I can make it show up by changing the height of the container into a percentage or vw-value. No matter what figure I add, it will always render the video double height and cutting off big parts of left and right sides. Also it will cut off more of the width when the viewport shrinks. When changing the container value to anything other than 0, the same happens in all other browsers.
Tried Firebug, but that doesn't even see the iframe.
Here is the code:
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
margin-bottom: 4vw;
}
.embed-container iframe, .embed-container object, .embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="embed-container">
<iframe src='https://www.youtube.com/embed//EyhQN24InWg?html5=1' frameborder='0' allowfullscreen></iframe>
</div>
web url:
https://www.marjanderksen.com
Have you tried to use FitVids.js?
<script src="js/jquery.min.js"></script>
<script src="js/jquery.fitvids.js"></script>
<script>
$(document).ready(function(){
$(".embed-container").fitVids();
});
</script>
Link to download plugin: https://github.com/davatron5000/FitVids.js
I am building a responsive web site and I am finding that Auto Image resize with broswer window resize using img max-width:100% works in Chrome but not IE and Firefox when any parent or ancestor has position:absolute;
(For information about this technique see
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
)
The following code can be used to demonstrate or reproduce this problem. you can also see this at http://sketchmotion.com/image-test2/. You will notice that resizing the browser window will resize the image in Chrome but not IE (I am running IE 11) . However, if you remove the following lines:
.mydiv{
position: absolute;
}
You will find that it now works in both Chrome AND IE.
This is not helpful since I I use position: absolute; on some of my parent divs on my site. And I need my site to work in IE and Firefox.
Please let me know if there is a work around for this problem so I can get the images to resize with the browser window on my site.
<html>
<head>
<!-- <link href="/cssh/ImageTest.css" rel="stylesheet" type="text/css"></link> -->
<style type="text/css">
.mydiv{
position: absolute;
}
img{
/*** Scaling Images with the Browser Window in CSS is pretty simple to implement for both images and video. ***/
/*** You can set the media element’s max-width to 100 percent, and the browser will make ***/
/*** the image shrink and expand depending on its container. ***/
/*** To maintain the right proportions use auto height ***/
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
</style>
</head>
<body>
<!-- -->
<div class="mydiv">
<div class="slides">
<div class="slide">
<img alt="" src="http://sketchmotion.com/ImagesSM/SM_Slider_1_SketchMotion_w_Sketch.jpg" />
</div>
</div>
</div>
</body>
</html>
Try this:
.mydiv {
position: absolute;
width: 100%;
}
I don't have an explanation exactly why, but this works. :)
I confirmed that using width: 100%; for parent and all ancestor divs makes it work in IE. However this is a bit of a pain because often that is not what you want to do. Chrome does not have that limitation and scales the image regardless which seems like a more sensible and consistent approach IMHO.
Thanks again Terry Clancy
For the responsive to work on IE. Do not include pictures in a <table>. Just use <div> and use CSS:
img {
max-width: 100%;
height: auto;
width: auto\9;
}
First off, I'm new to this and have been doing a lot of research, but can't find the answer.
I have set a div container at the top of my page to 100% width and 20% height.
I wanted to insert an image which would resize automatically across screen sizes.
I found some code on this site which works perfectly in safari and chrome (also resizes perfectly on an ipad and iphone) but in firefox(20) and IE(10) the image does resize slightly but wont stay in the parent container.
Can anyone help?
The original code I have been using is:
<html>
<style type="text/css">
#myDiv
{
height:auto;
width:auto;
}
#myDiv img
{
max-width:100%;
max-height:100%;
margin:auto;
display:block;
}
</style>
<div id="myDiv">
<img src="images/storm.jpg">
</div>
</html>
Any help would be appreciated (and please remember I'm learning!)
#myDiv img
{
width:100%;
height:100%;
margin:auto;
display:block;
}
You need to set the actual width/height of the image to 100%, not the max-width and max-height.
I have rotated a text in HTML5 canvas. It looks fine on all the browsers except google chrome. It looks distorted on chrome on Windows. Also, it looks fine on MAC. Why is it so?
I am using Chrome beta 20. Is it some HTML 5 issue or some Google Chrome or Windows bug? How can I resolve this distortion issue?
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.font = "12pt Calibri";
context.rotate(Math.PI/2.5);
context.fillText("Competitive Landcaping!", 450, 100);
};
</script>
</head>
<body>
<canvas id="myCanvas" width="878" height="2000"></canvas>
</body>
</html>
I went through the same head-banging myself recently. The short answer is that Chrome renders fonts quite poorly on Windows, and transformed fonts just get worse from there.
For a longer, more technical answer, check this post:
http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/
There isn't a whole to be done about it, apart from trying to pick fonts that look the 'least worst' in Chrome.
I`ve tried a couple of things even using the CSS clip, but not getting it proportionally fit in the thumbnails here http://giantmango.com/arttest2-2510.
In CSS, what is the best way and how would I proportionally resize an image to display in dimensions of a 200px (width) x 150 (height) thumbnail?
Just checked firebug and for some reason all my img tags are always set to a height of 200 even though I have max-height set to 150...
Use max-height and max-width. Beware that they are broken in older versions of IE. You can do
#myImage: {
max-height: 150px;
max-width: 200px;
}
EDIT: #tokiowp: try this. It should work (it surely does for me). So the problem with your layout comes from additional properties you may have set.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img style="max-height: 150px; max-width: 200px" src="giantmango48.jpg" />
</body>
</html>
EDIT: it turns out, looking at your source, that you are actually declaring your images with something like
<img src="http://giantmango.com/wp-content/uploads/giantmango78.jpg" alt="" title="giantmango78" width="200" height="200"/>
Of course what you need is to remove these declarations of width and height.
css:
#thumb {width:200px; height:150px;}
#thumb img {height:100%; width:100%; margin:0 auto;}
html:
<div id="thumb"><img src="tb01.jpg"></div>