Screen size is incompatible with flash player

I've been using this code to try and make a swf file fit my screen or any screen it's on, but I've run into an issue. When using this code, the player in both Chrome and IE stretches to fit the screen width, but the height remains the same, not filling up the screen vertically. Why is the width working but not the height?!

<style>
player {
  width:100%;
  height:100%;
}
</style>

    <!--[if IE]><object
        id="player"
        type="application/x-shockwave-flash"
        classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
        codebase="http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab"
    ><![endif]-->
    <!--[if !IE]>--><object
        id="player"
        type="application/x-shockwave-flash"
        codebase="http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab"
        data="/<? echo "$swf"; ?>.swf"
    ><!--<![endif]-->
        <param name="movie" value="/<? echo "$swf"; ?>.swf" />
        <param name="quality" value="high" />
        <param name="scale" value="noborder" />
        <p>
            <a href="http://get.adobe.com/flashplayer/">
                Adobe Flash Player
            </a> is required to view this content.
        </p>
    </object>

EDIT: If I change width:100%; & height:100%; to, for example, 600 for both, it works in both IE and Chrome. But as soon as I change it to 100%, the width fits the screen while the height is only about half the screen height, and in IE the resizing doesn't work at all :<

Answer №1

It appears that there is an issue with your CSS. Remember to use the # symbol to target an ID.

#player {
  width:100%;
  height:100%;
}

Answer №2

To properly embed flash content, ensure that it is not enclosed within other elements and that the html & body elements have a height of 100%.

Here is a sample code snippet for reference:

 <!DOCTYPE html>
 <html>
      <head>
           <style type="text/css">
                html, body {
                     height: 100%;
                }

                #player {
                     width: 100%;
                     height: 100%;
                }
           </style>
      </head>
      <body>
           <object id="player" type="application/x-shockwave-flash" data="/path/to/yourfile.swf">
                <p>
                     This content requires Adobe Flash Player. 
                     <a href="http://get.adobe.com/flashplayer/">
                          Download it here
                     </a>.
                </p>
           </object>
      </body>
 </html>

If the above method does not work, you can use fixed or absolute positioning as shown below:

 #player {
      position: absolute; // or "fixed"
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
 }

Answer №3

If you're still having issues with the # selector, consider adjusting the scale parameter. Instead of the current setting, try using exactfit as suggested by Adobe's documentation:

scale - You have options like showall, noborder, exactfit, noscale. These specify how Flash Player will scale the SWF content to fit the pixel area outlined by the OBJECT or EMBED tag.

  • default (Show all) will display the entire SWF file without distortion, while preserving the original aspect ratio. There may be borders on two sides of the movie.
  • noborder will scale the SWF file to fill the specified area, maintaining the original aspect ratio without distortion. Content may be cropped.
  • exactfit will show the entire SWF file without preserving the original aspect ratio. This could result in distortion.
  • noscale will prevent the SWF file from scaling to fit the specified area, potentially causing cropping.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Conceal all components on a webpage with the exception of a designated div

I am looking to selectively hide elements on the page, revealing only the contents of div.k1. The page contains numerous elements. How can I achieve this using just CSS? <div>1-this will be hidden</div> <div class="k1"> 2-this div wi ...

Stop the click event from firing on child elements of a parent element that is currently being dragged

Below is the structure of a UL tag in my code: <ul ondrop="drop(event)" ondragover="allowDrop(event)"> <li class="item" draggable="true" ondragstart="dragStart(event)" ondrag="dragging(event)"> <div class="product-infos"> ...

Showing a collection of cards within a dynamic container set up in a 3x3 grid layout to start

In an attempt to showcase cards within a responsive container utilizing bootstrap and django, my goal is to create a 3x3 grid layout on extra-large screens with scrollable overflow that adjusts based on device width. Initially, I experimented with wrapping ...

Why isn't the image showing up as a list style?

I can't seem to get the image to show up on my page. Can anyone help me figure out what's wrong? ul li { background-image: url(logo.png); background-repeat: no-repeat; padding-left: 0px; } This is what I'm currently seeing: This is what ...

Is your Bootstrap button displaying a blue border?

Recently, I incorporated buttons into my website using a bootstrap template. However, after customizing the button colors, I discovered an annoying blue outline appearing around each button. Despite numerous attempts, I have been unsuccessful in eliminatin ...

Stop flex items from expanding larger than their sibling elements

Is there a way to prevent a flex item from growing bigger than its siblings? Check out the example on CodeSandbox: LINK Here is the sample code: <div class='wrapper'> <div class='box one'></div> <div class ...

Design adaptable HTML backgrounds

Hello, I am working on a webpage that uses two background images. Here is the CSS I'm using: body{ background: url('<?=base_url();?>/assets/header_bg.png') no-repeat, url('& ...

Adjust the text color when hovering with the style tag

When it comes to customizing the color of a link on hover, CSS makes it simple with code like this: .myId:hover{ color:green; } But what if you're using inline styles? Is there a way to achieve the same effect without just plain HTML and CSS? & ...

IE does not support hover effects

Having trouble with a hover effect that works in Chrome but not in MSIE. Are there any alternatives or fixes to make it work in MSIE? The hover/rollover effects I've tried all seem to have this issue in IE. normalize.css demo.css set2.css font- ...

Why isn't my lightbox able to read this specific property?

A gallery was created using both lightgallery and cycle2. Cycle is a carousel plugin while lightgallery is a lightbox gallery. Clicking on an image in the carousel opens it in the lightbox. Everything worked perfectly until a category in the carousel was ...

JQuery requests functioning flawlessly on one system while encountering issues on other systems

I've encountered an issue with the code on my admin page. It used to work perfectly fine on my system, but now it seems to have stopped functioning. My client urgently needs to update this page, however, when I attempt to run it, the JQuery requests a ...

What steps can I take to resolve the CSP errors I am experiencing?

I am currently working with NextJs@12 and I am attempting to set up CSP for my application. Unfortunately, I keep encountering errors in my console and I cannot figure out where I am going wrong. Below is the current policy that I have in my next.config fi ...

Display the chosen alternative in a Bootstrap dropdown menu

I am currently facing an issue with the dropdown list in my bootstrap menu. <li class="dropdown"> <a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#">Chose option<span class="c ...

Navigating to the bottom of a specific element by scrolling

I am currently working on enhancing a module within the application I'm developing. The goal is to automatically scroll the browser window to the bottom of an element when said element's height exceeds the height of the window. The functionality ...

css - Showcasing images with a horizontal scrollbar

I'm having an issue with displaying multiple images in a fixed-width div horizontally. I want to have a horizontal scroll bar for the images that exceed the width of the div. Currently, the images are appearing vertically instead of side-by-side. Is ...

Scrape data from websites where the main URL remains constant but the information in the table varies

If you take a look at this link, you'll notice that when the next page is selected, the table on the website gets reloaded with new content without any change in the URL. Even after inspecting the developer tools > Network > XHR, it's diffi ...

What is the method for styling the third list item in a CSS hierarchy?

I'm struggling to understand the hierarchy in CSS for creating this specific layout. I've searched for explanations, but haven't found a clear one that breaks down how each level works. This is my first time working with CSS so it's bee ...

Tips for achieving a background animation similar to the one shown on this page

Check out this link: danielcoding.me/resume/#contact I am interested in this animation: screenshot I tried inspecting element on the page, but couldn't find any background images. How can I create this animation? Is it achieved through JavaScript or ...

When an SVG component is contained within an "i" element, the color does not change when the div is hovered over

Is there a way to make the "icons" change color to yellow when hovered over, similar to the text? I tried using .navbar-list-item i:hover, but it only works when the icon itself is hovered over, not the div that contains it. This issue arises due to a pre ...

Div refuses to clear floats

Working on an app at and encountering an issue with the main container not clearing floats, causing overflow on the content. Attempted to use this CSS: .clearfix:after { content:""; display: table; clear: both; } Added the class to the main ...