Dynamic Video Player

Trying to embed a YouTube video on your webpage? Most sources suggest using the following code:

HTML

<div class="video-container"><iframe.......></iframe></div>

CSS

.video-container {
        position:relative;
        padding-bottom:56.25%;
        padding-top:30px;
        height:0;
        overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
}

However, you might not want the video to take up the entire screen. Adjusting the height and width directly in the HTML code doesn't seem to work. Changing the percentage values from 100% to 75% made the video smaller, but the video container still occupied the full width space.

Answer №1

If you want to adjust the width of your video-container, try enclosing it within another div and setting the width on that surrounding div.

Here is an updated version of your code:

<div id="video-wrapper">
  <div class="video-container">
    <iframe></iframe>
  </div>
</div>

Add this CSS for the video-wrapper:

#video-wrapper {
  width: 75%;
}

Take a look at the changes here: http://jsfiddle.net/c34phqgo/

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

Using CSS to rearrange the order of specific div elements with the nth-child() selector when targeting different

I am attempting to design a centered navbar for a webpage. The navbar consists of 5 divs and my goal is to have the third div become the first one when the screen size goes below 600px. Here is the HTML code: <div class="mainmenu"> < ...

Mastering the art of obtaining XPaths through Selenium WebDriver

While working on test automation for a section of Outlook Web App, I focused on checking a designated test mailbox that receives emails from our company. I needed to verify specific texts within an email using Assert, but encountered difficulty in identify ...

Accessing video durations in Angular 2

Can anyone help me with retrieving the video duration from a list of videos displayed in a table? I attempted to access it using @ViewChildren and succeeded until encountering one obstacle. Although I was able to obtain the query list, when attempting to a ...

Can the Browser width/document width be maintained when shrinking the browser window size?

https://i.stack.imgur.com/a4gfA.pngLooking for a solution to maintain the browser/document width at 350px, preventing users from minimizing the window. The desired width is actually 400px, not 350px. Please refer to the image above. I require the window ...

How to properly format the <address> element on my website to display our company's contact information

While developing a website with asp.net mvc-5, it's important to include our company's contact details like telephone, email, and postal address. That's why I utilized the <address> tag within our "Contact US" page, replacing actual in ...

Achieve full width navigation without compromising the website layout

Is there a way to make my navigation menu fill the entire page? I tried using absolute positioning and setting the top, left, bottom, and right values to 0, but it ended up overlapping the content and changing the page color. Here's the HTML/CSS code ...

IE Flash overlay is causing compatibility issues with the website

I'm working on a website that has a flash player embedded, and I'm trying to add an overlay that can display HTML content. The plan is to have the flash element fade out to 0.5 opacity before showing the HTML text. It works perfectly in Google Ch ...

Stopping smart highlighting on mobile email clients like Outlook

After sending a test email to Outlook and opening it in the Outlook iOS app, I noticed that the default style of the text for dates/times appears with its own color. https://i.sstatic.net/iydYd.png (The white/gray part is only to conceal the text, reveal ...

Do I really need to include the jqueryui css file in order to enable autocomplete

Bootstrap is my go-to for CSS, but I only use jQueryUI for autocomplete. Do I really need the jQueryUI CSS or can I just use the functional parts? ...

Integrating C code into an HTML webpage

My C code includes #include <stdio.h> and I want to display it on a webpage using the pre and code tags. However, the angle brackets are disappearing in the output. #include stdio.h Is there a way to show the stdio.h with the angle brackets intac ...

Ensure that any modifications made to an Angular service are reflected across all components that rely on that service

I am currently in the process of replicating a platform known as Kualitee.com, which serves as a test-management tool utilized by QA Engineers. Within Kualitee, users can access multiple projects, each containing various test cases and team members. The ab ...

Issue with initial loading of Nextjs Material UI CSS causing display problems

Utilizing Next.js in conjunction with Material UI, the Material UI CSS does not load correctly upon initial page load, resulting in a display error similar to this image: https://i.sstatic.net/7wpxM.png The correct styling is achieved after a page transit ...

An unconventional way to display an image using the :before pseudo-element and a data attribute in CSS

My goal is to use the :before pseudo-element to set an image background, as I plan to overlay content on top of it. In the past, I have dynamically set a data attribute with :before for other purposes. Question: Is there a way to change the number using ...

Alignment of nav-item with superimposed right position

Can someone help me align my navbar elements in Bootstrap 4? I want all elements aligned to the right, except for one that needs to be centered: <ul class="nav navbar-nav"> <li class="nav-item float-xs-right"> <a class="nav-link" ...

Save hyperlinks provided by users within the text

Users have the ability to create a post and leave a comment. I am aiming to give my users the option to include a hyperlink in their comment, such as: "This is a comment where aboutme is a hyperlink." I am unsure of how to store this hyperlink. Currently, ...

Issues with AngularJS UI Router functionality are being experienced specifically on localhost

What is causing the discrepancy in UI-Router functionality between JSFiddle and localhost? The localhost link is http://127.0.0.1:54046/preview/app/index.html. Have I overlooked something crucial here? There are no visible JS errors present in the console. ...

What is the best method for incorporating a data-* attribute to every option while configuring a select2 input field?

Currently, I am utilizing the select2 plugin to enable the selection of an image from a list to display on the screen. In order to achieve this functionality, I must assign a specific attribute to each option: s3_key. My requirement is to set this attribu ...

Bootstrap Modal with HTML5 validation highlights focusable errors upon form submission

I have a simple form for updating user data: <div class="row"> <div class="col-7"> <h6 class="text-center">User Profile</h6> <hr> <div class="form-group"> <label for="name" cla ...

Can anyone help me with integrating a search functionality inside a select tag?

I am working on a select dropdown and want to add a search box to easily filter through the available options. I know this can be done using the chosen library, but I prefer to implement it using plain JavaScript or jQuery. Does anyone have suggestions on ...

Flask url_for usage done wrong

Running a flask server serves HTML pages with scripts stored in the static folder. An example script included in the header is: <script src="{{url_for('static', filename='js/viewer.js')}}"></script> The GET reques ...