4

...Summary of the problem...

Example of what works

Title attribute works great on image, for example

<img
    src="http://imgs.xkcd.com/comics/the_general_problem.png"
    title="I find that when someone's taking time to do something right in the present, they're a perfectionist with no ability to prioritize, whereas when someone took time to do something right in the past, they're a master artisan of great foresight."
    alt="The General Problem"
>


The problem (Example of what doesn't work)

I'm trying to embed an iframe video, like when you click "share this video" off of YouTube or (in this case) SouthPark Studios

It seems that either:

  • I don't know the right attribute to use with iframe element (it is aparently not "title"), or
  • "title" is corect, but iframe trumps it with some kind of layering issue. See below


...Further reading: Details on what I already tried...

1st try: Wrap it in a div, & give the div max layer

<div
    title="South Park video about Ginger Kids coming in the night to carry off the town's other kids"
    style="z-index: 2;"
>
    <iframe
        src="http://media.mtvnservices.com/embed/mgid:arc:video:southparkstudios.com:1feaa96c-ed01-11e0-aca6-0026b9414f30"
        width="360"
        height="293"
        frameborder="0"
    >
    </iframe>
</div>


Sources:
https://stackoverflow.com/a/7117107/1421642, for divs
http://www.echoecho.com/csslayers.htm, for layer (z-index)


2nd try: Just put "title" in iframe tag

<iframe
    title="South Park video about Ginger Kids coming in the night to carry off the town's other kids"
    src="http://media.mtvnservices.com/embed/mgid:arc:video:southparkstudios.com:1feaa96c-ed01-11e0-aca6-0026b9414f30"
    width="360"
    height="293"
    frameborder="0"
>
</iframe>


Results for both trys

El zilcho

In both cases, I mouse over the iframe and nothing happens. Compare that to my "example of what works" code at the very begining, where you can mouse over and see a beautiful little popup

Please help :)

Community
  • 1
  • 1
Bukov
  • 650
  • 8
  • 19

1 Answers1

1

You can give the iframe a title, but it won't appear in the tooltip. Change the frameborder to "2" and move your cursor to it and a title will appear.

To see the title on iframe you must set the title of iframe content and not the iframe itself. ( How to display tooltip when mouse hover iframe )

http://jsfiddle.net/2YGNx/

HTML

    <iframe frameborder="1" src="javascript:'<div>Helllo World</div>';" style="width: 100%; height: 100%; margin: 0px; padding: 0px;position:relative;" title="hello world" id="contentIframe"></iframe>

Javascript:

$(document).ready(function () {    
   $("#contentIframe").contents().find("body").find('div').attr('title','Hello world');

});

However, because you are dealing with a flash video, It won't work that way. Flash likes to 'take over' as an extension, and the browser won't treat it as 'part of the page' in the sense that it will show the tooltip. Your best bet is to create an object with the video url as the source, and then setting the wmode to transparent. ( CSS Hover Tooltip Bubble Being Hidden Behind iFrame Video )

Community
  • 1
  • 1
Alice
  • 422
  • 1
  • 9
  • 28
  • So iframe is used for things other than video, in which case title works fine. But iframe + video = I'm boned. In **that** case you're saying don't use iframe at all, use html **object**? Could you possibly add a jsfiddle example to your answer for **that**, please? Not only couldn't I get title working using the code from your 2nd link -- it in fact broke my video completely. Here's the jsfiddle I attempted: http://jsfiddle.net/bukov/Ru4SW/ – Bukov Jun 01 '13 at 05:22
  • Note: Even if you can fix the `` stuff in that jsfiddle example I linked, please note neither of them have the original problem solved: title. I understood that your solution wanted me to use `wmode="transparent"` but I don't understand how that gets me my title. Do I combine that with "try #1" above in my Original Post? The outer, "wrapper div" and **that** has a title? – Bukov Jun 01 '13 at 05:24
  • Oh, hmm. I guess I didn't think that through. Maybe if you put that object in an iframe, and then used that... but really. It seems like too much work to go about doing so. Is the tooltip necessary? – Alice Jun 01 '13 at 17:49
  • So your answer is "just give up"? :( My reply is "Well, nothing's **necessary**". No **lives** depend on my our html code being 100% aesthetically perfect or anything. And yet, that is the reason for SO's existence in the first place, no? Title text is to describe single pictures for blind people. Videos are pictures too, they're just **moving** pictures. Title text seems to be just as necessary for them as for images – Bukov Jun 02 '13 at 20:01