Bug with youtube embed when using css 'column-count'

data embed youtube
youtube iframe preload
dynamically load youtube video
youtube embed lite
load youtube video on click jquery
youtube autoplay embed
youtube embed video
youtube video gallery codepen

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:

  1. I tried putting <p> tags around the text thinking it might be line length related quirk.

  2. I tried clearing the cache.

  3. Changing the width of the column

  4. 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.

google chrome, 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  CSS code to make YouTube embed video responsive Here I am going to give you the CSS code which will make YouTube embed video width 100% and also responsive. This video player will fit with any screen on any device if it is mobile or PC/desktop.

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&amp;autoplay=0&amp;wmode=opaque&amp;controls=0&amp;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!

Bug with youtube embed when using css 'column-count', 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. The bug was reported 2 weeks ago. While this bug was identified after data was lost on a site using CSS Injector 1.x, it likely impacts other Drupal modules. Category

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

Lazy load embedded YouTube videos, This is a very clever idea via Arthur Corenzan. Rather than use the default YouTube embed, which adds a crapload of resources to a page  How to Use Firebug to Modify Your WordPress Site's CSS (Video Tutorial) - Part1 Part2 - http://www.youtube.com/watch?v=al2l9VbZ8tg Visit Tips and Tricks HQ f

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.

Solved: HubSpot Community, The issue is with the following starting at line 17 in the modules.css file: to both the page and the YouTube video you are using in this case? A little movie about some css bugs i don't know the name of the song. An omgomg production NO CHEATS HAVE BEEN USED!

iframe element is breaking live CSS loading · Issue #7935 · adobe , in live dev, I narrowed it down to an embedded youtube iframe element. Simply resolved by commenting out the iframe :) Any fix planned ? Validating a website is important to do since it can help find errors in the HTML or CSS markup. GET ACCESS TO MY LESSON MATERIAL HERE! First of all, thank you for all the support you have given me!

Learn How to Embed a Youtube Video in HTML From Real Examples, Oct 2, 2019. TL;DR – Embedding a YouTube video to your website lets you add dynamicity to your site without having to worry about format compatibility issues. The trick is using an iframe instead of the <video> tags: Example Copy Learn HTML5 and CSS3 to Build a HTML5 Website from Scratch. Playing a YouTube Video in HTML. To play your video on a web page, do the following: Upload the video to YouTube. Take a note of the video id. Define an <iframe> element in your web page. Let the src attribute point to the video URL. Use the width and height attributes to specify the dimension of the player.

Video background not playing, what is the embed code you used? or did you use a link to the video? (I never use Chrome) - at Chrome I must turn the video on at the YouTube I do not have CSS editor. Here's how I fixed it while we wait for the bug fix. Sometimes when writing CSS you will encounter an issue where your CSS doesn't seem to be doing what you expect. Perhaps you believe that a certain selector should match an element, but nothing happens, or a box is a different size than you expected. This article will give you guidance on how to go about debugging a CSS problem, and show you how the DevTools included in all modern browsers can

Comments
  • I have the same problem, not only with Chrome, but also with Safari. Safari seems to move the iframe below the columns, if it is the last part of the content. And sometimes renders / sometimes not. Firefox seems to render without problems.
  • As this is an issue for me, and I couldn't find any other tips or solution about it, in addition to above, I also have a problem in Safari. If the left column content is smaller than the height of the iframe, the iframe visuals jump down below the columns (only the visuals, NOT the actual content: you can still click on the video where it was located). see this fiddle: jsfiddle.net/KTvCV/726
  • Did you find a solution to this? I am having the same problem. Thanks
  • If you don't mind so much about performance and using some JS hack, I managed to trigger correct positioning by setting a style attribute to the iframe. E.g. Set its width to its current width through Javascript, see here: jsfiddle.net/pnds97m2
  • i can confirm the same thing. The video only worked when on first column. I tried adding z-index and I could see the video but wasn't clickable to play.
  • So are you answering, saying that the issue exists? While this might be valuable information, I doubt it fits into the SO "answer" category.