Bug 246736 - Embedding YouTube videos with <iframe> just shows black area
Summary: Embedding YouTube videos with <iframe> just shows black area
Status: RESOLVED UNMAINTAINED
Alias: None
Product: konqueror
Classification: Applications
Component: khtml (show other bugs)
Version: 4.8.4
Platform: openSUSE Linux
: NOR normal
Target Milestone: ---
Assignee: Konqueror Developers
URL: http://www.gtalbot.org/BrowserBugsSec...
Keywords: reproducible, testcase, triaged
: 275184 282491 (view as bug list)
Depends on:
Blocks:
 
Reported: 2010-08-04 22:57 UTC by Joachim Mairböck
Modified: 2024-05-06 18:38 UTC (History)
4 users (show)

See Also:
Latest Commit:
Version Fixed In:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Joachim Mairböck 2010-08-04 22:57:36 UTC
Version:           unspecified (using KDE 4.4.95) 
OS:                Linux

Embedded YouTube videos using something like <iframe width="640" height="385" src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0"></iframe> (see http://blog.mozbox.org/post/2010/07/26/How-to-embed-a-HTML5-video-with-youtube) just shows a black area instead of the actual video. I have disabled HTML 5 on YouTube because it doesn't work correctly in Konqueror, so it should display the videos as flash (with nspluginviewer).

The iframe itself is rendered as it can be seen from the context menu, but not any of its contents

Reproducible: Always

Steps to Reproduce:
1. Open any site which uses iframe embedding, for example my blog http://jmairboeck.blogspot.com/
2. See the empty iframes instead of the video (I don't have tested HTML5 mode) 

Actual Results:  
The contents of the iframe are not rendered (no flash video)

Expected Results:  
The video is correctly embedded and viewable (using Flash)
Comment 1 Gérard Talbot (no longer involved) 2012-01-25 23:22:38 UTC
> (see
> http://blog.mozbox.org/post/2010/07/26/How-to-embed-a-HTML5-video-with-youtube)

"
This domain has been blocked
"

Can you try 
http://www.gtalbot.org/BrowserBugsSection/Konqueror4Bugs/Bug282491-Play-Flash-Videos-Youtube.html
with latest Konqueror version?

Gérard
Comment 2 Gérard Talbot (no longer involved) 2012-01-25 23:28:10 UTC
<iframe width="640" height="385"
src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0"></iframe>

One problem I see here is that, by default, the mimeType of iframe is text/html ... and a flash video is not an HTML document but rather application/x-shockwave-flash. So, this <iframe> code CAN NOT work for flash video and SHOULD NOT work by design for flash video. Konqueror may be complying here with web standards more than other browsers.

Gérard
Comment 3 Joachim Mairböck 2012-01-26 19:46:34 UTC
So this is a bug at YouTube that they don't declare the mimetype for the iframe correctly on the server side? Is that correct?
Comment 4 Gérard Talbot (no longer involved) 2012-01-26 23:08:24 UTC
Hello Joachim,

> So this is a bug at YouTube 

I am not saying that, *yet*. I do not know for sure. 

What we need first of all is to create one (and only one) good working bug report with exact conditions, steps to reproduce, etc... Is the bug happening when videos are embedded into webpages? If so, what's the code used?, etc.. We first need to gather a lot of accurate, useful information about a bug that we can reproduce and investigate.

Today, I visited YouTube.com with
KDE Platform Version: 4.8.0
Konqueror version: 4.8.0 (with KHTML rendering engine)
Qt Version: 4.7.4
Operating System: Linux 3.0.0-15-generic-pae i686 (32bits) 
Distribution: Kubuntu 11.10
Adobe Flash version: 11.1.102.55
and I was able to view videos. The nspluginviewer crashed when I clicked the Back button a few times. Sometimes the nspluginviewer crashed a few times for unknown reasons.
 
> they don't declare the mimetype for the iframe ...

All I know for sure and certain is that an iframe is just like a frame: it's a sub-window that is supposed to display another webpage, another HTML document *by default*. (The HTML4 <object> element is also supposed to do also that but it is more versatile and flexible. The spec gives several meaningful examples of such versatility.) Now, if it's not an HTML document, then the mimeType must (or should?) be explicitly declared so that the browser gets a chance to know in advance which plugin to use or which application to use. If such mimeType is not provided, then the browser will first try to render the content, the data as text/html and if it fails, then the spec does not add anything.

[Addendum: the spec gives this example:
<FRAME src="contents_of_frame2.gif">
http://www.w3.org/TR/html4/present/frames.html#h-16.2.2.1
So, image/gif mimeType is most likely detected when loading the image.
]

There is nothing in the current spec (HTML 4) that says that an iframe should be used, just like that, to display a content of type "application/x-shockwave-flash" without some kind of explicit declaration about it. There is no attribute in iframe to declare mimeType; there is with HTML4 object element though.

What other browsers may be doing is not what the spec says; it is extra, outside the spec.

---------

Can you try 
http://www.gtalbot.org/BrowserBugsSection/Konqueror4Bugs/Bug282491-Play-Flash-Videos-Youtube.html
and indicate your results along with your 
KDE Platform Version: 
Konqueror version: 4.? (with ? rendering engine)
Qt Version: 4.?
Operating System: ?
Distribution: ?
Adobe Flash version: ?

Gérard
Comment 5 Joachim Mairböck 2012-01-27 08:19:45 UTC
(In reply to comment #4)

> Can you try 
> http://www.gtalbot.org/BrowserBugsSection/Konqueror4Bugs/Bug282491-Play-Flash-Videos-Youtube.html
> and indicate your results along with your 
> KDE Platform Version: 
> Konqueror version: 4.? (with ? rendering engine)
> Qt Version: 4.?
> Operating System: ?
> Distribution: ?
> Adobe Flash version: ?

Your test case works perfectly with the following settings (which I usually use)

KDE Platform Version: 4.7.4 (I will update to 4.8 asap, I can try again then)
> Konqueror version: 4.7.4 (with KHTML rendering engine)
> Qt Version: 4.8.0
> Operating System: Linux i686
> Distribution: openSUSE 12.1
> Adobe Flash version: 11.1.102.55

YouTube itself also works quite well (except some playlists, but that's a different story). The problem is embedding videos in other sites. Your testcase uses the "old" embed code.

You can go to any video on YouTube, click on "Share", then "Embed". The default HTML code presented is the <iframe> method. If you select "Use old embed code", you get the old code with <object>, but that is not the point here. There are many sites out there that use the <iframe> method. So I think this is supposed to work. It does work in all other browsers I tested, even in Konqueror with Webkit, IIRC.

The reason probably is that they also want to support the HTML5 mode if the user has opted in to that (that setting is stored in a browser cookie).
Comment 6 Gérard Talbot (no longer involved) 2012-01-27 18:12:02 UTC
I have modified

http://www.gtalbot.org/BrowserBugsSection/Konqueror4Bugs/Bug282491-Play-Flash-Videos-Youtube.html

to only include relevant, basic parameters. So, 
allowscriptaccess, allowfullscreen, feature_embedded, version=3, rel=0, etc.
have all been removed. I also made the viewport larger and taller.

> Your test case works perfectly with the following settings (which I usually
> use)
> 
> KDE Platform Version: 4.7.4 (I will update to 4.8 asap, I can try again then)
> > Konqueror version: 4.7.4 (with KHTML rendering engine)
> > Qt Version: 4.8.0
> > Operating System: Linux i686
> > Distribution: openSUSE 12.1
> > Adobe Flash version: 11.1.102.55

So, I understand that you use KHTML rendering engine?

> 
> YouTube itself also works quite well (except some playlists, but that's a
> different story). The problem is embedding videos in other sites. Your testcase
> uses the "old" embed code.

Yes and no. I use <object> and not necessarly the whole code provided by YouTube.com. I never use <embed>.

> 
> You can go to any video on YouTube, click on "Share", then "Embed". The default
> HTML code presented is the <iframe> method. 

Okay, this helps. So, I see now where this <iframe> code comes from.


> If you select "Use old embed code",
> you get the old code with <object>, but that is not the point here. There are
> many sites out there that use the <iframe> method. So I think this is supposed
> to work. It does work in all other browsers I tested, even in Konqueror with
> Webkit, IIRC.

Well, this needs to be verified, confirmed in a bug report. Reliable information.

> 
> The reason probably is that they also want to support the HTML5 mode if the
> user has opted in to that (that setting is stored in a browser cookie).

Ah... <iframe> code embedded into an HTML5 document.
HTML5, iframe element
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-iframe-element.html#the-iframe-element

They mention valid nested browsing context... which could mean almost anything. Etc... but that would be another bug report.

Gérard
Comment 7 Gérard Talbot (no longer involved) 2012-01-27 18:14:43 UTC
I am more and more convinced that the black area that you saw is a normal fallback mechanism that Konqueror uses: since the embedded content is not a normal HTML document and since Konqueror does not know how to render such content (lack, absence of mimeType hint), then (hypothesis) Konqueror displays an about:blank kind of page ... which would have a black background-color.
Comment 8 Joachim Mairböck 2012-01-27 20:08:01 UTC
I also think that the black is some sort of fallback. If I kill nspluginviewer (or when it crashes), the normal YouTube watch page also goes black in the video area. But that is rendered explicitly there, underneath the flash applet, otherwise it would be just the page background and not black. So I doubt that black area is something "about:blank" like.
Comment 9 Gérard Talbot (no longer involved) 2012-06-21 21:02:52 UTC
*** Bug 275184 has been marked as a duplicate of this bug. ***
Comment 10 Gérard Talbot (no longer involved) 2012-06-21 21:09:06 UTC
Joachim,

Please verify that
http://www.gtalbot.org/BrowserBugsSection/Konqueror4Bugs/Bug246736-Play-Flash-Videos-YouTube-iframe.html
works for you. If it does not, please provide useful details, concrete specifics.

For me, the embedded iframed document is 150px tall (height) and 300px wide and this is according to Konqueror's DOMtreeviewer computed property values.

"
if 'width' has a computed value of 'auto', but none of the conditions above are met, then the used value of 'width' becomes 300px. If 300px is too wide to fit the device, UAs should use the width of the largest rectangle that has a 2:1 ratio and fits the device instead. 
"
which applies to inline-block, replaced element in normal flow
10.3.10 'Inline-block', replaced elements in normal flow
http://www.w3.org/TR/CSS21/visudet.html#inlineblock-replaced-width

I am using
KDE Platform Version: 4.8.4
Konqueror version: 4.8.4 (with KHTML rendering engine)
Adobe's Flash version: 11.2.202.236 (visit http://www.adobe.com/software/flash/about/ )
Qt Version: 4.8.1
Operating System: Linux 3.2.0-25-generic-pae i686 (32bits)
Distribution: Kubuntu 12.04 LTS
here.

------------------------------

Joachim, please confirm again that 

http://www.gtalbot.org/BrowserBugsSection/Konqueror4Bugs/Bug282491-Play-Flash-Videos-Youtube.html

works accordingly, as expected, without problems or issues.

------------------------------

I have updated Version field, URL field, Keywords field.

Gérard
Comment 11 Gérard Talbot (no longer involved) 2012-06-21 21:33:10 UTC
*** Bug 282491 has been marked as a duplicate of this bug. ***
Comment 12 Joachim Mairböck 2012-06-22 08:30:43 UTC
Gerard,

Both your test cases work as they should. But I have seen you use http://www.youtube.com/v/video_id for embedding. AFAIK this always uses Flash for the video. The official embed code uses http://www.youtube.com/embed/video_id which uses Flash by default and HTML5 if the user has enabled that in http://www.youtube.com/html5 (I haven't because it doesn't work correctly with KHTML, but that's a different issue). Youtube stores that setting in a cookie.

If I enable HTML5, the video preview shows. If the video contains ads, the frame goes black again if I start to play it as it switches to Flash because of the ads and I hear just the audio and see nothing, not even the controls. If the video doesn't contain ads, the controls stay there but the video hangs and doesn't play (but that's a different issue as I've said). Strangely, on YouTube itself, all videos play in Flash even with HTML5 enabled.

My current version information: 
Distribution: openSUSE 12.1 x86
KDE 4.8.4 (from KDE:Distro:Factory repository)
Qt 4.8.2
Konqueror 4.8.4 (using KHTML)
Flash Player 11.2.202.236 (from official repository)

Regards, 
Joachim
Comment 13 Gérard Talbot (no longer involved) 2012-06-22 17:11:46 UTC
(In reply to comment #12)
> Gerard,
> 
> Both your test cases work as they should. 

Joachim, 
Over here, the embedded iframe of
http://www.gtalbot.org/BrowserBugsSection/Konqueror4Bugs/Bug246736-Play-Flash-Videos-YouTube-iframe.html
is 300px wide by 150px tall ... and such dimensions are not my expected results. But I can [re]|[dis]play the video.
[Addendum 1]: "The <iframe> tag's height and width parameters specify the dimensions of the player."
https://developers.google.com/youtube/player_parameters#Manual_IFrame_Embeds
[Addendum 2]: "The <iframe> tag below would load a 640x390px player that would play the YouTube video u1zgFlCw8Aw."
https://developers.google.com/youtube/player_parameters#Manual_IFrame_Embeds



> But I have seen you use
> http://www.youtube.com/v/video_id for embedding. AFAIK this always uses
> Flash for the video. The official embed code uses
> http://www.youtube.com/embed/video_id which uses Flash by default and HTML5
> if the user has enabled that in http://www.youtube.com/html5 

Okay. That is useful info. I searched and found
YouTube Embedded Players and Player Parameters:
IFrame embeds using <iframe> tags
https://developers.google.com/youtube/player_parameters#Manual_IFrame_Embeds

and then it says:
"
For an IFrame embed, the YouTube video ID for the video that you want to load is specified in the IFrame's src URL. (...)
IFrame embed:
http://www.youtube.com/embed/VIDEO_ID
"
https://developers.google.com/youtube/player_parameters#Selecting_Content_to_Play

> (I haven't
> because it doesn't work correctly with KHTML, but that's a different issue).
> Youtube stores that setting in a cookie.
> 
> If I enable HTML5, the video preview shows. If the video contains ads, the
> frame goes black again if I start to play it as it switches to Flash because
> of the ads and I hear just the audio and see nothing, not even the controls.
> If the video doesn't contain ads, the controls stay there but the video
> hangs and doesn't play (but that's a different issue as I've said).
> Strangely, on YouTube itself, all videos play in Flash even with HTML5
> enabled.
> 
> My current version information: 
> Distribution: openSUSE 12.1 x86
> KDE 4.8.4 (from KDE:Distro:Factory repository)
> Qt 4.8.2
> Konqueror 4.8.4 (using KHTML)
> Flash Player 11.2.202.236 (from official repository)
> 
> Regards, 
> Joachim

Joachim, thank you for your complete response. This helps. 

What now? We need to do more tests, simple tests and find out which code fails in Konqueror 4.8+.

One thing that I suspected and that I am sure of now is that the mimeType for an <iframe> is by default text/html. In the 2nd example given at 
YouTube Embedded Players and Player Parameters: 
IFrame embeds using <iframe> tags
https://developers.google.com/youtube/player_parameters#Manual_IFrame_Embeds
we can see:
<iframe id="ytplayer" type="text/html" width="640" height="390"
  src="..."
  frameborder="0"/>

Gérard
Comment 14 Gérard Talbot (no longer involved) 2012-06-22 17:26:47 UTC
Okay! Here's the test with the code using youtube.com/embed/video_id as src of an iframe:

http://www.gtalbot.org/BrowserBugsSection/Konqueror4Bugs/Bug246736-Play-Flash-Videos-YouTube-iframe-with-embed.html

Firefox 13.0.1, Opera 12.0 and Chrome 19.0.1084.56 pass this test: the video is played.

Konqueror 4.8.4 fails this test: I only see a black rectangular area and the video can not be played.

So, based on all our discussions, I will be able to confirm this bug.

Gérard
Comment 15 Gérard Talbot (no longer involved) 2012-06-22 18:01:35 UTC
Newest discovery: there seems to be a hang bug associated with the test when the window gets blur() event and/or when the application window gets re-focus()-ed.

Steps to reproduce:
1- Load
http://www.gtalbot.org/BrowserBugsSection/Konqueror4Bugs/Bug246736-Play-Flash-Videos-YouTube-iframe-with-embed.html
in a tab in Konqueror 4.8.4

2a)- I switch to another application

or

2b) switch to another application and then close such application

or

2c) switch to another application in the task manager, then switch back to Konqueror application

Actual results: the CPU %tage of activity for Konqueror increases to 50% or so and remains high (hang bug). There seems to be an infinite loop or reflow occuring.
F5 or Ctrl+R or Ctrl+F5 in the tab where the Bug246736-Play-Flash-Videos-YouTube-iframe-with-embed.html is loaded in Konqueror 4.8.4 ends the high CPU %tage of activity for Konqueror.
I can better reproduce with 2c) scenario. This is a serious issue.

Gérard
Comment 16 Joachim Mairböck 2012-06-22 18:29:04 UTC
I can confirm the hang bug you described, now using HTML5 enabled YouTube. The video does not play, but I hear the audio. Pausing the video using the play button, I see a "window being closed" animation from KWin compositing. The audio doesn't resume when playing again, but when pausing again, the "window close" animation is visible again.

Closing the not active Bug Testcase tab now even caused Konqueror to crash with SIGABRT! Thanks Session Restore, that even my comment was still there.
Comment 17 Joachim Mairböck 2012-06-22 18:49:09 UTC
I have filed the crash as Bug 302366 as it is nothing Flash related (which was the original issue here) and is probably not even Konqueror's fault (the abort occurs somewhere in gstreamer).
Comment 19 Gérard Talbot (no longer involved) 2012-06-22 19:31:26 UTC
URL field and Keywords field have been updated accordingly.

Based on comment #14, the bug has been reproduced and has a testcase.

CONFIRMING

----------------

I will create another bug report with regards to the CPU %tage of activity getting high and remaing high (hang application, hang bug): this is a very serious issue.

Gérard
Comment 20 Christoph Cullmann 2024-05-06 18:38:40 UTC
Dear user,

KHTML (and KJS) was a long time more or less unmaintained and got removed in KF6.

Please migrate to use a QWebEngine based HTML component.

We will do no further fixes or improvements to the KF5 branches of these components beside important security fixes.

For security issues, please see:

https://kde.org/info/security/

Sorry that we did not fix this issue during the life-time of KHTML.

Greetings
Christoph Cullmann