On my HTML page, I have <div> with an <iframe>, which references another page, that contains a Flash SWF object. If I set any of these:
display:none;
visibility:hidden;
opacity:0;
filter:alpha(opacity=0);
on the <div> that wraps the <iframe>, the SWF object sometimes remains in plain sight, while the <div>and <iframe> go out of view as expected.
The weird thing is that it really works sometimes, depending on the SWF object I use.
The expected effect occurs in all the latest browsers on my Mac and all on my Windows 7 machine except for Safari.
EDIT
Here is some example code that illustrates the issue:
<button id="tryit" type="button">Try It</button>
<div id="test">
<iframe src="hideswf-iframe.html" width="770" height="610" frameborder="0"></iframe>
</div>
<script type="text/javascript">
var test = document.getElementById("test"),
tryit = document.getElementById("tryit");
tryit.addEventListener( "click", hideAndSeek, false );
function hideAndSeek(e) {
var style = test.style;
style.opacity = (style.opacity == 1 || style.opacity == "") ? 0 : 1;
}
</script>
and a sample SWF object as the guinea pig:
<object type="application/x-shockwave-flash" id="strobemediaplayback" data="StrobeMediaPlayback.swf" width="743" height="600" style="visibility: visible; ">
<param name="allowFullScreen" value="true">
<param name="wmode" value="direct">
<param name="flashvars" value="favorFlashOverHtml5Video=true&swf=StrobeMediaPlayback.swf&javascriptCallbackFunction=$.fn.strobemediaplayback.triggerHandler&minimumFlashPlayerVersion=10.0.0&expressInstallSwfUrl=expressInstall.swf&autoPlay=false&loop=false&controlBarMode=docked&poster=&src=http://players.edgesuite.net/videos/big_buck_bunny/bbb_448x252.mp4&useHTML5=false&width=1187&height=959&queryString=favorFlashOverHtml5Video=true&swf=StrobeMediaPlayback.swf&javascriptCallbackFunction=$.fn.strobemediaplayback.triggerHandler&minimumFlashPlayerVersion=10.0.0&expressInstallSwfUrl=expressInstall.swf&autoPlay=false&loop=false&controlBarMode=docked&poster=&src=http://players.edgesuite.net/videos/big_buck_bunny/bbb_448x252.mp4&useHTML5=false&width=1187&height=959">
</object>
which would exist in a file hideswf-iframe.html.
This should work in the latest versions of Safari, Chrome and Firefox on a Mac and in the latest versions of Chrome, Firefox and Internet Explorer on a Windows 7 machine, and it should fail (no errors but the hiding behavior doesn't occur) in Safari on a Windows 7 machine.
It might be pertinent to note that one thing I've noticed about the SWF objects that have passed and failed are that the ones that have failed all revolve around video content whereas the ones that have passed don't. Granted I haven't tested more than a half-dozen objects, but that's quite a coincidence. :)
have been trying to resolve this issue as well, didn't find any documentation from safari, tried all possible combinations of css and jquery hiding, it doesn't work
for those who are skeptical can, check out http://css-tricks.com/examples/AnythingSlider/ on safari and go through the slides, you'll see the bug in the 3d slide.
if your case is:
<div id="main">
<iframe>
<object.../>
</iframe>
</div>
I suggest you use jQuery("#main").toggle(), which works pretty well in my experience.
simply add this line of JavaScript to your page:
swfobject.switchOffAutoHideShow();
Related
i have to show one or more pdf-docs in a part of a website. in all browsers my code still works - only chrome does not show the file.
here is the code-snip i use (the css class is a flex-construct only):
<div class="aufinfo_item_pdf" data-id="<%$image->get_id()%>">
<object class="aufinfo_item_pdf_obj" data="/company_images/article/<%$image->get_id()%>" type="application/pdf">
<p>not possible to show - download at: ... link</p>
</object>
</div>
I am trying to 'theme' and position the pluging via css.
Here a piece of code:
<!-- vlc-player -->
<embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org"
width="660"
height="420"
id="vlc"
autoplay="yes"
allowfullscreen="yes"
windowless="yes"
mute="no"
loop="no"
toolbar="no"
bgcolor="#111111"
text="pirate-radio.eu"
branding="false"
target="lollipop.mp4">
</embed>
<!-- vlc-player end -->
Nothing fancy...
With this 'configuration' the player runs fine in FF and has a black background.
(Why, supposed to be #111?)
CSS attributes like 'opacity', 'z-index' and positioning via the "vlc"-id (I use in CSS as well) does what it should do.
However, in Chrome it shows a little bit different results.
First, the background of the player comes transparent, not black.
Second, the position of the player is shifted about 2-3px to the right (where I can life with but it be nice to know why too...)
If I evite CSS-rules both player-backgrounds come black.
Question is, is it the right way to use the forementioned id ("vlc") in CSS for reference?
If I wrap the embed-tag into a box (div) it isn't possible to target the player anymore.
How an I target the player properly to 'ccs it'?
I just messed up with another player I tested before and hadn't given me the results expected.
The correct implementation of a VLC-Player is (like published on several sites) for example as follows:
<embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org"
width="660"
height="370"
id="vlc"
autoplay="true"
allowfullscreen="false"
windowless="true"
mute="false"
loop="true"
toolbar="false"
bgcolor="#111111"
text=""
branding="false"
controls="false"
target="media/video/TESTCARD.mp4">
</embed>
So far so good?
Greets
Gee
I need to know the following...
I have a video embed in html using tag, the page that I'm building is using the z-index, the idea is to use layers... everything was fine until, the media embed...
I have a video on full screen 100% width and height ...
<style>
.bg_vid {
position: absolute;
z-index 10;
w: 100%
h: 100%
}
.btns {
position: relative;
}
.btn-overlay-vid {
bg: url'img/pattern.png';
position: absolute;
z-index: 30;
}
.btn-video {
z-index: 25;
}
</style>
<div class="btns">
<div class="btn-overlay-vid"></div>
<div class="btn-video">
<object width="300" height="169">
<params name [...]> </params>
<params name [...]> </params>
<params name [...]> </params>
<params name="wmode" value="transparent" > </params>
<embed [...]&embed=transparent ></embed>
</object>
</div>
</div>
<div class="bg_vid">
<iframe [...] />
</div>
So the background video for the full "screen" is working fine, but, the button video is not working... I mean the overlay div still behind the now this only happen for almost all browsers but Google Chrome .. in Google Chrome is working good...
the video is behind the overlay div which is just an image for(for now), so I wonder why in IE(not surprise there) and Firefox is not working...
Thank you.
Try giving .btn-video a position, relative or something. z-index doesn't like undeclared positions.
I had to change my Java that I was using for the tag... and by doing so, I can now use &wmode=transparent in my , Say I want to send the iFrame to the background of any other layer...
<iframe
class="behind"
type="text/html"
width="300"
height="169"
src="https://www.youtube.com/embed/7SyAejEiiLw?autoplay=1&controls=0&loop=1&modestbranding=1&rel=0&showinfo=0&color=white&wmode=transparent" frameborder="0" allowfullscreen></iframe>
Now I can dance like the guys in that video...
Note: If you want to use the "Params" like in this demo I suggest you use the YouTube API instead, it will work as standalone but is always better to use the API, more control over the YouTube Player.
So my conclusion to this is NEVER limit an HTML TAG, I was reserving the iframe tag for other purposes and by doing so I was forcing my self to use the object tag for media files, also was limiting the use of my site on other devices such as tablets or smartphones, the tag is not so friendly with those devices.
I am embedding a local pdf file into a simple webpage and I am looking to set the initial zoom to fit to the object size. Here is what I tried but it is not affecting the zoom.
<embed src="filename.pdf?zoom=50" width="575" height="500">
does anyone know how to modify the code so its initial zoom is set to fit the object size.
Bit of a late response but I noticed that this information can be hard to find and haven't found the answer on SO, so here it is.
Try a differnt parameter #view=FitH to force it to fit in the horzontal space and also you need to start the querystring off with a # rather than an & making it:
filename.pdf#view=FitH
What I've noticed it is that this will work if adobe reader is embedded in the browser but chrome will use it's own version of the reader and won't respond in the same way. In my own case, the chrome browser zoomed to fit width by default, so no problem , but Internet Explorer needed the above parameters to ensure the link always opened the pdf page with the correct view setting.
For a full list of available parameters see this doc
EDIT: (lazy mode on)
For me this worked(I wanted to zoom in since the container of my pdf was small):
<embed src="filename.pdf#page=1&zoom=300" width="575" height="500">
This method uses "object", it also has "embed". Either method works:
<div id="pdf">
<object id="pdf_content" width="100%" height="1500px" type="application/pdf" trusted="yes" application="yes" title="Assembly" data="Assembly.pdf?#zoom=100&scrollbar=1&toolbar=1&navpanes=1">
<!-- <embed src="Assembly.pdf" width="100%" height="100%" type="application/x-pdf" trusted="yes" application="yes" title="Assembly">
</embed> -->
<p>System Error - This PDF cannot be displayed, please contact IT.</p>
</object>
</div>
just in case someone need it, in firefox for me it work like this
<iframe src="filename.pdf#zoom=FitH" style="position:absolute;right:0; top:0; bottom:0; width:100%;"></iframe>
Followed #Rich answer, I used view=FitH in my code to view PDF content base64 in Angular as below.
I shared for whom concern about view base64 content PDF file with object tag using Angular framework.
The option for view PDF
this.pdfContent =
URL.createObjectURL(this.b64toBlob(content, 'application/pdf')) +
'#toolbar=0&navpanes=0&scrollbar=0&view=FitH';
Read PDF content from API as
let content = DataHelper.getDataFromAPI();
When click show content button use
showData() {
let content = DataHelper.getDataFromAPI();
this.pdfContent =
URL.createObjectURL(this.b64toBlob(content, 'application/pdf')) +
'#toolbar=0&navpanes=0&scrollbar=0&view=FitH';
this.pdfview.nativeElement.setAttribute('data', this.pdfContent);
}
In HTML file use object tag as
<object #pdfview
[data]=''
type="application/pdf"
width="100%"
height="800px"
>
</object>
Link Angular demo https://stackblitz.com/edit/angular-ivy-tdmieb
Bit late response to this question, however I do have something to add that might be useful for others.
If you make use of an iFrame and set the pdf file path to the src, it will load zoomed out to 100%, which the equivalence of FitH
Use iframe tag do display pdf file with zoom fit
<iframe src="filename.pdf" width="" height="" border="0"></iframe>
This works fine for me
<embed src=".file-name.pdf#zoom=FitH" width="100%" height="1930px" />
I'm trying to get a html 5 video to play on mouseover. It works fine in firefox and safari just in chrome the video blanks out when i hover and becomes visible only after i hover on another element on the page....
This is the site: www.manart.de
This is the code:
<div id="wrapper">
<video id="video-example" width="880" height="495" poster="fileadmin/cover.png" loop>
<source src="fileadmin/schiffchen.ogg.ogv" type="video/ogg"></source>
<source src="fileadmin/schiffchen.mp4" type="video/mp4"></source>
</video>
</div><!--end wrapper-->
<script src="fileadmin/js.js"></script>
And this is the js:
document.addEventListener('mouseover',hoverVideo,false);
var vid = document.getElementById('video-example');
function hoverVideo(e)
{
if(e.target == vid)
{
vid.play();
this.addEventListener('mouseout',hideVideo,false);
}
}
Thanks for helping!!!!
It's a bit odd that, but if you remove the poster frame (I also made sure that the hideVideo method was defined to avoid an exception being thrown) it works (fiddle).
I tried using a JPG instead of a PNG for the poster frame with the same results (fiddle). And when you substitute your video for one with sound, it's apparent that the video is playing, but that it's invisible (fiddle).
Looks like a bug in Chrome to me but Google didn't throw much up when I searched (maybe my terms were wrong).
The quick fix, therefore, is probably to simply remove the poster frame which, since Chrome will display the first frame of the video when it has loaded, is probably pretty close to what you're looking for anyway.
Update:
Alternatively, you could use the hack detailed in this thread on a similar issue which involves dynamically adding controls to the player before playback starts and removing them again immediately (fiddle). The author has confirmed the issue as a bug in Chrome by verifying that it does not occur in Chrome 19.
HTML:
<div id="wrapper">
<video id="video-example" poster="http://www.manart.de/fileadmin/cover.png" width="880" height="495" loop>
<source id='mp4'
src="http://www.manart.de/fileadmin/schiffchen.mp4"
type='video/mp4'>
<source id='ogv'
src="http://www.manart.de/fileadmin/schiffchen.ogg.ogv"
type='video/ogg'>
</video>
</div>
JavaScript:
var vid = document.getElementById('video-example');
// add the listener directly to the video element
vid.addEventListener('mouseover',hoverVideo,false);
function hoverVideo(e) {
if (vid.getAttribute('controls') != 'true') {
vid.setAttribute('controls', 'true');
}
vid.play();
vid.removeAttribute('controls');
vid.addEventListener('mouseout',hideVideo,false);
}
function hideVideo(e) {
// do whatever you were going to do here, but omitting
// the method completely causes an exception
//vid.pause();
// clean up the listener when finished
vid.removeEventListener('mouseout', hideVideo);
}