I downloaded smoothmenu from dynamic drive. I am using the vertical menu with slide out sub-menus. Everything works beautifully except my page that has embedded youtube videos. On this page, the sub-menus appear behind the video. I have the site up on:
http://hardcorehockey.com.previewdns.com/videos.html
I tried to use z-index but that didn't fix it.
Please help.
try adding this to your embed code:
<param name="wmode" value="transparent"></param>
If that doesn't do it, try "opaque" instead of "transparent"
Related
<object data="NAME.pdf" type="application/pdf" width="100%" height="1200px">
<p>Alternative textMy CV</p>
</object>
So let's say I embed my pdf into my page like this, so that the entire page is the pdf document. EXAMPLE
The issue I get is that when you scroll inside the object (pdf), it only scrolls the object, so when it's full screen nothing happens. I would like the user to be able to scroll the site, not the pdf.
Also is there a way to change the object pdf background color?
Thanks for the help, there doesn't seem to be much documentation on this. If you have any other suggestions on integrating a full-page pdf please let me know. I am using pure HTML/CSS.
There's a page on my website where I have embedded a livestream from twitch.tv and I am experiencing some issues with the livestream overlapping content that it shouldn't. If the user tries to login or register while on that page, then the embedded video will place itself on top on the modal/dialog that opens. The modal is created with Bootstrap 3.
It looks like this:
The iframe embed looks like this:
iframe src="https://www-cdn.jtvnw.net/swflibs/TwitchPlayer.swf?channel=imaqtpie" frameborder="0"
Anyone know a solution to this?
You're going to probably look at the CSS z-index attribute.
You can manually set them in the order you want, however beware of any overiding css coming from the the boostrap class modal.
Although I think it is just the video that needs a lower z-index, as modals are usually given higher values.
e.g.
<iframe style='z-index:0' ...
More on this SO post: how to control div overlapping in html
Fun tutorial if you have the time: http://webdesign.tutsplus.com/articles/what-you-may-not-know-about-the-z-index-property--webdesign-16892
I have looked around the internet for a method to remove the YouTube logo from their iFrame player.
I am using
<iframe width="550" height="314" src="https://www.youtube.com/embed/vidid?modestbranding=1&rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
which removes the 'watch on YouTube' button from the bottom actions panel however it adds the YouTube logo watermark to the bottom right of the video and when I hover over it says watch on YouTube.
I have tried changing 'embed' to 'v' which removes it but then it doesnt work on iPad/phone.
Any suggestions?
As far as I know, the most you can do is to add the modestbranding=1 option to the URL, but this only gets rid of the title and youtube link on the top of the player.
I don't think you can get rid of the bottom right one that appears when you hover.
Source: https://developers.google.com/youtube/player_parameters#modestbranding
You can upload it from google drive!
If you use modestbranding=1 you can't use showinfo=0. You can only use 1 or the other. Also, if you use modestbranding=1 it must come first right after the url.
Example:
https://youtube.com/embed/vidid?modestbranding=1
I'm using the FancyBox plugin for some of my site's images. On one of my pages, I also have the embedded iFrame code from YouTube to place a video on the page.
On this same page is a thumbnail that, when clicked, FancyBoxes the image. However, the embedded YouTube video still lays over the FancyBox image. I did a bit of z-index experimenting and still no luck.
Does an iFrame have seniority over all elements in a page even with z-index set, etc.?
Add wmode=transparent as param.
Html solution
<iframe title="YouTube video player"
width="480" height="390"
src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent"
frameborder="0"
>
jQuery solution:
$(document).ready(function () {
$('iframe').each(function(){
var url = $(this).attr("src");
$(this).attr("src",url+"?wmode=transparent");
});
});
Source http://www.scorchsoft.com/news/youtube-z-index-embed-iframe-fix
In a word, yes. However Youtube videos are Flash. Flash also has seniority over the Z-order. It will overlay whether it is in an IFRAME or not.
IFRAME and Flash are "heavyweight" objects. They have their own Window Manager objects (HWND in Windows), so they are either in front of other heavyweight objects or behind them.
div, span, etc are "lightweight". That is they are drawn objects, drawn onto the Body (which is a heavyweight object), and managed by the browser, not the window manager.
As far as the operating system window manager is concerned, they are just pretty pictures drawn by the browser. That's why they cannot overlay "real" objects (or what the window manager thinks of as real).
They have to be lightweight because they would rapidly exhaust the window manager if every DIV and SPAN and A had to reserve OS resources.
If you want the Flash applet to be rendered according to the same z-index rules of any other HTML element, then you need to set the WMODE attribute for the included flash.
See:
http://www.communitymx.com/content/article.cfm?cid=E5141
differences between using wmode="transparent", "opaque", or "window" for an embedded object on a webpage
Is very simple, just add this parameters to your iframe url and thats it:
<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" frameborder="0" wmode="Opaque">
Good luck!
Hmm, the problem here is that I don't have control over the flash elements. I'm basically just pulling the embedded iFrame HTML from the youtube site which only contains the tags. So I can't set the WMODE attribute.
Late answer but: yes you can. Just tack ?wmode=opaque onto the yt url.
<iframe src="http://www.youtube.com/embed/vRH3Kq5qDw4?wmode=opaque".............
To get this to work in IE (at least 7 and 8) you must add this:
<param name="wmode" value="transparent" />
I don't believe there is a way to append this to the iframe URL so your content needs to have this, probably between object tags.
I'm pretty much at my wits end with this issue. I've been searching for a while and though I find many posts with people having the same issue as me, I'm not finding any answers or solutions to these posts.
The problem is this: We have a PDF viewer embedded on a report site. The user has the option to view the PDF in the browswer or to download it. We have a dropdown menu so the user can navigate to different reprots. The menu overlaps the PDF viewer when it drops down. In IE, it goes over the PDF viewer, as it should. In FireFox it goes behind the viewer and gets cut off.
Here is a code snipit:
<div style="position: relative; height: 347px; z-index: 1;" id="divPDF">
<span style="width: 100%; height: 100%;" id="PDFViewer1">
<div>
<object width="100%" height="100%" type="application/pdf" data="report.pdf#toolbar=1&navpanes=0&scrollbar=1&view=FitH">
<param name="wmode" value="opaque" />
<embed src="report.pdf#toolbar=1&navpanes=0&scrollbar=1&view=FitH" type="application/pdf" width="100%" height="100%" wmode="opaque"></embed>
Download PDF
</object>
</div>
</span> </div>
I have tried putting it in an iframe, but that didn't work. I've tried setting the vmode to transparent, but that didn't work either. (Is vmode even a valid param?) The z-index for the menu is 500.
Any suggestions would be greatly appreciated.
Thanks in advance.
This is known issue with the 'embed' html tag & the way the adobe pdf renders the pdf . Currently Adobe does not support transparency tags like the flash files do ( wmode=transparent) kind of thing in the PDF rendering.
Have you check in Firebug at all instances that the z-index of your menu and pdf containers remain constant? When I say instances I mean when the user interacts with the menu and whatnot.
Or perhaps it's a CSS overflow issue? Just throwing things out.
I had the same problem. I fixed it by hiding the report when the user clicked the drop down menu, then showing it again when the menu was hidden. It's mostly a hack, but it works and allows me to have both my embedded report and my drop-down menu.