Is there a way to make the embed tag match the size of the div tag?

Is there a way to ensure that the size of the embed tag matches that of the div tag? I am able to adjust the size of the embed tag to match the div tag, but I want to maintain the full resolution of the embed tag (which is used for a webcam).

<div style="background-color: #111; width: 80%; height:500px; margin-left: auto; margin- ight: auto; ">      
      
<embed id="webcam_movie" wmode="Transparent" src="../Scripts/webcam.swf" loop="false" menu="true" quality="best" bgcolor="#ffffff" name="webcam_movie" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="shutter_enabled=1&amp;shutter_url=../Scripts/shutter.mp3&amp;width=800&amp;height=600&amp;server_width=800&amp;server_height=600" height="600" width="800" align="middle">  

</div>
htmlcss

Answer №1

One clever technique is to enclose an embed element inside a div and apply specific CSS styling to it.

    <head>
    <style>
    .video-wrapper {
        height: 0;
        overflow: hidden;
        padding-bottom: 56.25%;
        padding-top: 30px;
        position: relative;
    }
    .video-wrapper embed {
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }
    </style>
    </head>
    <body>
    <div class="video-wrapper" style="background-color: #111; width: 80%; height:500px; margin-left: auto; margin-right: auto; ">      

    <embed id="video_player" wmode="Transparent" src="../Assets/video_clip.swf" loop="false" menu="true" quality="best" bgcolor="#ffffff" name="video_player" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="autoplay=1&amp;volume=75&amp;width=640&amp;height=360&amp;server_width=640&amp;server_height=360" height="360" width="640" align="middle">  

    </div>
    </body>

Answer №2

Check out the following links for more information:

Also, consider switching the allowfullscreen="false" to allowfullscreen="true".

Let me know if this information is helpful.

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

What is the best way to show two columns on mobile with bootstrap 5?

I'm currently working with bootstrap 5 and I'm trying to display 2 columns on my mobile, but it's only showing 1 column. <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemai ...

htmlbootstrap-5

Guide to executing the "brew" command on a Windows operating system

Encountering the error message "'brew' is not recognized as an internal or external command" in the Windows command prompt. https://i.sstatic.net/suFT2.png Attempting to set up the codeigniter-reactjs-example project from github, where the init ...

phphtmlcodeigniterreactjscommand

I am having difficulty organizing my text into two grid columns and aligning it in the center

.hero { display: grid; grid-template-columns: repeat(2, 33.45rem); grid-template-rows: 12.5rem; border-bottom: .05em solid #05d31f; width: 69.8rem; height: 16.5rem; } .hero-title { grid-row-start: 1; grid-column-start: 1; } .hero-title h ...

htmlcssreactjs

Clickable list element with a button on top

Within my web application, there is a list displaying options for the user. Each 'li' element within this list is clickable, allowing the user to navigate to their selected option. Additionally, every 'li' element contains two buttons - ...

javascripthtmlcss

Ways to even out the base of a tilted vessel?

My container is currently transformed with transform: skew(0deg, -3deg )translateY(-6vh), but since I am using it as a footer, I would like the bottom part to be completely flat. Is there a way to achieve this without placing another container on top wit ...

htmlcssbootstrap-4

Modifying the file name during the download process using AngularJS

Looking for a solution to download a file from an ajax GET request in angularjs? Currently, I am using an invisible iframe to trigger the "Save as" popup for the downloaded file. However, I need to change the name of the file before the popup appears. If ...

javascripthtmlajaxangularjs

Steps for implementing overflow scroll on a div with an unspecified height

The layout I'm working with looks like this: .page { width: 360px; height: 704px; border: 1px solid red; } header { height: 10%; width: 100%; display: flex; align-items: center; justify-content: center; background-color: lightblue; } ...

javascripthtmlcssoverflow

Target the first element within a tree structure using CSS

Trying to target the initial blockquote in an email body with varying formats, such as: <div class="myclass"> <br><p></p> <div><div> <!--sometimes with less or more div--> <blockquote&g ...

htmlcss

I am having trouble retrieving the information stored in an Array of Objects. Specifically, I am having difficulty accessing and iterating through each object using a for

Is there a way to extract data from an API individually and retrieve data from an Array? let {Array}=jsonData fetch("https://apis.ccbp.in/city-bikes?bike_name" + search, options) .then(function(response){ return response.json(); }) .then(funct ...

javascripthtmlcss

Attempting to eliminate the parent container of a slide generated by the Slick Slider Plugin

I have developed a filter mechanism that hides specific classes within a slick slider based on the data-tag associated with the objects and the value of checkboxes. However, when these classes are hidden, they still occupy space because I should be hiding ...

jqueryhtmlcssslider

By default, the sidebar is open on desktop devices while closed on mobile devices

I am struggling to figure out how to set my sidebar/navigation content, using Bootstrap, to be expanded by default on desktop and closed by default on mobile with the icon only showing on mobile devices. Despite multiple attempts, I cannot seem to make thi ...

javascripthtmlcssbootstrap-4responsive-design

Ways to hide an element when scrolling for a better user experience

I am encountering an issue with a custom icon element in my table. The icon is supposed to only be displayed when its specific row is hovered over. However, when I scroll down without moving my mouse, the hover state does not update and the icon remains on ...

javascripthtmlcss

Displaying a div based on the response after it is received using an if/else statement

In my form, each question is on a separate page (div), with the ability to show and hide pages. If a user receives a response from the API with a status of "accepted", they are redirected to a URL. I'm currently trying to display a div if their status ...

javascriptjqueryhtmlcssjson

Angular Dynamic Alert Service

Is it possible to customize the text in an Angular Alert service dynamically? I'm looking to make certain words bold, add new lines, and center specific parts of the text. Specifically, I want the word "success" to be bold and centered, while the rest ...

javascripthtmlcssangular

Toggle Form Section Visibility

I am working on a table with five rows that have upload buttons. Each time I submit a row, the page refreshes, but I want to hide all but one row at a time. When the first submit button is clicked, it should show the next row and hide the previous ones. Th ...

javascriptphpjqueryhtml

The input box refuses to accept any typed characters

I encountered a strange issue where the input box in the HTML was not allowing me to type anything. const para = document.createElement('p') const innerCard = document.getElementsByClassName('attach') for(let i = 0; i < innerCard.l ...

javascripthtmlcss

AngularJS radio buttons are unable to be selected in a simplistic manner

I have implemented a dynamic list display using HTML radio buttons. Here is the code snippet: <html> <head> <script src="angular-v1.5.5.js"></script> </head> <body> <div ng-app="myApp" ng-controller=" ...

javascripthtmlangularjs

Tips for positioning elements in the header section

I'm struggling to prevent my HTML element from pushing down my other elements. When I look at the header, you can see that the BitBay title is causing alignment issues with the search bar and the account button. Even after trying to use the text-alig ...

htmlcss

Unable to get CSS to function properly on website

I am having trouble getting my text to format properly on my web page. I have defined rules in my style sheet to center an object on the screen, but it's not working as expected. Here is the code for my web page: body { text-align: center; } h1 { ...

htmlcssweb

What is the best way to retrieve the value of the selected mat-option?

I've been struggling to extract the selected value of a mat-option using this specific HTML and TypeScript code. html <mat-form-field appearance="outline" floatLabel="always"> <mat-label>TRA Type</mat-label> ...

htmlangulartypescriptangular-materialfrontend