I inserted a youtube embed code (the iframe code) in a webpage, and used css column-count to automatically divide text in the page to two columns.
.newspaper
{
-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
column-count:2;
}
The problem is when i embed youtube video after the initial viewport it is shown as black image. Here is an example: http://jsfiddle.net/KTvCV/689/. Seems this is bug with youtube and chrome. Is there any solution/fix for this issue?
Tried different things and not working so thinking to go with jQuery columnizer instead of CSS column count.
Trouble Replicating This Problem - Observations
I am seeing very inconsistent behavior with Chrome trying to display iframe embedded videos in a multi-column format.
The following did not seem to clear the problem consistently:
I tried putting <p> tags around the text thinking it might be line
length related quirk.
I tried clearing the cache.
Changing the width of the column
Changing the dimensions of the iframe
In addition, videos below the fold seem not to be rendered (painted?).
Once Case That Works
The only situation that seems to render well is having a single video that appearing in the first column.
I don't know why this is the case.
I had this problem, for me the fix was to give the <iframe> an explicit width in pixels, position: relative, z-index, and a 3d-transform such as transform: translate3d(0, 0, 0).
Experienced in Chrome 43.0.2357.130 (64-bit) for OS X Yosemite 10.10.3
For me, only adding transform: translate3d(0, 0, 0) on my <video> tag worked.
Note: I use a <video> tag, not an embedded <iframe> YouTube video. But I had the same problem with columns.
I can confirm the issue with having a YouTube video combined with column-count. http://codepen.io/djschoone/pen/VYdaOv shows what's happening. The video moves to an other position.
HTML
<html>
<body>
<article class="display-2col">
<p>Text</p>
<p><iframe src="http://www.youtube.com/embed/GUstB3VS4KY?rel=0&autoplay=0&wmode=opaque&controls=0&showinfo=0" width="614" height="370" class="video-filter video-youtube vf-gustb3vs4ky" frameborder="0"> </iframe></p>
</article>
</body>
</html>
CSS
.display-2col{
-moz-column-count:2;
-moz-column-gap:20px;
-webkit-column-count:2;
-webkit-column-gap:20px;
column-count:2;
column-gap:20px;
}
The difference with IE and FF is the video is placed with the tag on Chrome whilst the others get the tag served.
I guess it has something to do with positioning. Looking into it!
Related
I have a pretty simple layout which renders fine in both Firefox and Chrome, but Internet Explorer (version 11) seems to be unable to render any kind of background color for the <main> element.
I have the <main> element as a child of the <body> element and neither background or background-color seem to make any difference. <main> will always have the same background as <body>. I haven't found anything that says whether or not this is a bug in IE.
Check out this jsfiddle using Internet Explorer to see what I mean.
Obviously, I could just replace <main> with <div id="main"> and update my CSS selectors but I want to understand why this is happening.
IE11 does not support the <main> element natively. You can introduce support for it by either using a script like Modernizr, or a single harmless line of JS:
document.createElement('main');
The element will not be inserted in the DOM, but it will now be recognized as a proper element by IE. After this, it still does not have proper styling. Add the following to your CSS:
main {
display:block;
}
And all will be fine. The reason you currently see it as not getting any content because IE does not add it to the box model without these 2 steps, and as such it gets no 'layout' or 'size'. It's just invisible, that's why you see the body. It does contain elements, which get rendered (sort of) correctly based on the top left coordinate of the <main> element.
Simple: The <main> tag is not supported in IE11.
I have a menu element on the top of the page with
position:fixed;
z-index:1000;
and it normally stays at the top of the page, without any complaining. However, whenever I have a youtube embedded video in the page (also must be playing at the time) it seems, the fixed menu has all sorts of glitches and jumping around. Is this a common issue, embedded videos interfering with position:fixed elements? The issue is in Chrome, Safari, but oddly enough, not in Firefox.
Does this console error have anything to do with it?
Unsafe JavaScript attempt to access frame with URL ww.youtube... from frame with URL ww.youtube... Domains, protocols and ports must match.
I know this description is not very elaborate, so here is the url: Chronicle Video Section. I'm making my high school's school newspaper site, and I'm stumped on this one issue - never seen it before. Try scrolling up and down while the video is playing. Thanks for your help.
The div the iframe is in is:
<div class="entry-content">
<p>
<iframe... />
</p>
</div>
If it helps, how I have it set up is that it currently pulls the entry content of the wordpress post content which is just the youtube url and Wordpress converts the url into an embed into that div.
I found that adding the style rules
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);
to the fixed element sorted out the craziness for me.
I had exactly the same problem and I found a very simple solution. Add the following parameter:
?wmode=transparent
to the youtube video url. For example:
<iframe width="560" height="315" src="http://www.youtube.com/embed/brg1H4BuII8?wmode=transparent&rel=0" frameborder="0" allowfullscreen></iframe>
More details here.
This isn't a YouTube bug. This is a webkit bug related to redrawing of fixed position items. I recommending filing the bug with webkit.
http://www.webkit.org/quality/reporting.html
If you want a work around for now, I would recommend listening to the window scroll event and changing the style of the menu(width, height, or position) to force a redraw.
This is building on #gregdev's answer:
backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform: translateZ(0);
-moz-transform: translateZ(0);
-webkit-transform: translateZ(0);
For complete browser support.
I have this "web-site" -> http://www.krlja-ustvari.hr
It works 'perfect' in Google Chrome. By 'perfect' I mean that content is always 100% width and 100% height, overflown stuff is hidden and line breaks are made without <br /> tags. That's exactly what I need.
However, when I look at the same page in Firefox or Internet Explorer (didn't check with other browsers) I can see vertical scroll bar. That's exactly what I don't want.
My question is simple: how to make this page render in all browsers like in Google Chrome?
Thank you very much for any help!
if you do not need scrollbars in the body/document at all
<style type="text/css">
body { overflow:hidden; }
</style>
I believe that if you change the min-height:100% declaration on #content to just height:100%, you should be fine in those other browsers.
That worked when I edited your page in Firebug for FF.
Here are my styles:
Parent container:
div.musicContainer {
width:820px;
height:54px;
margin-bottom:20px;
}
Child containers:
div.hardcorePlayer {
width:400px;
float:left;
border:none;
background-color:#996600;
}
div.feedbackPlayer {
width:340px;
float:right;
border:none;
background-color:#996600;
}
The issue is: i installed IE9 yesterday and while IE8 was displaying fine well now the feedbackPlayer div is not lined up to the right boundary any longer. it displays fine in other browsers as before.
is this a IE9 bug?
IE9 image:
other browser image:
thank you very much for your thoughts on this.
website url: www.guygar.com/guygar.html
NOTE: here is the new CSS with the reset data. Have i done something wrong?
Maybe you should try to reset the css so that all browsers start out with the same defaults (like padding, margin ect.)
You can find a css-reset and more information here: http://meyerweb.com/eric/tools/css/reset/
Edit:
Related question: https://stackoverflow.com/questions/116754/best-css-reset
This line is in flash.
Change body background to white, and .musicContainer to red. You will see that html is not failing. In my opinion it is a flash like bug.
Try zooming in FF ( I tested in 5.0) on few zooms there is also same gap.
I couldn't find a css reset being used on the site you provided. It may just be a difference in how IE9 displays different elements (margins, padding etc). I tried out the provided website in IE9 and didn't see the problem so it's a bit difficult to diagnose, though.
I'm using this approach for my websites I created prior to IE9.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
Let it be the very first meta tag in your head tag, and IE9 will act as it was IE8, hopefully in the same identical way.
It solved all my problems in all my websites until now.
Enjoy
It's related to flash redrawing. It behaves the same in ie8. Try resizing the browser window width and you will see that it doesn't update correctly.
Why dont you try a html5 player like http://www.jplayer.org/ instead?
Maybe try using js to check the browser and alter the size or position with js in an if statement.
w3 schools has a nice tutorial on browser checking.
http://www.w3schools.com/js/js_browser.asp
I'm using the HTML5 elements and in a project i'm working on and the css seems to be working fine in Chrome. However, it doesn't appear to be working in Safari or Firefox (I haven't tested IE, but I'd imagine it's the same), and the page layout is all over the place.
Any ideas why this may be? I know Firefox and Safari both support these elements, and Safari is webkit-based like Chrome, so I can't figure out what the problem is.
You can see the webpage here. {website link not available}
Safari and Firefox have the same level of ‘support’ for HTML5 sectioning elements (after seeing your demo page, I’m guessing these are the elements you’re talking about): they can be styled, but you have to set display: block; implicitly.
aside, article, section { display: block; }
Adding this rule to your CSS will solve the problem.
To make these elements stylable in IE, you just need to use the HTML5 shim/shiv. Put the following HTML in your <head>:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Which part isn't working exactly? The <canvas> element appears to be rendering correctly, your <article> container isn't being ignored.
I'm in FF3.6.2, btw. The only CSS errors I see are just that: CSS errors.
I had a problem with "figure" element, not showing background image. so i overcome the problem with this...
background-image:url("../img/login_bg.jpg");
background-position:center center ;
background-repeat:no-repeat;
background-size:cover;
This didn't work...
background: rgba(0, 0, 0, 0) url("../img/login_bg.jpg") scroll center center / cover ;