I am working on the responsive version of client's website and I stumbled upon this issue - when I make smaller the browser window, the youtube video is not centered - the padding-right: 10px; is ignored - why?
How could I fix that?
Here is the CSS that I use for the border around youtube video:
padding: 10px;
position: relative;
overflow: hidden;
The issue with the video not adjusting its size correctly may be due to the specific embed code you are using, which typically sets a fixed dimension for the <iframe> element, preventing it from being responsive to changes in layout or resizing events.
A helpful jQuery plugin that addresses this problem is available at
Alternatively, you can create your own simple jQuery function (view fiddle here) :)
$(document).ready(function() {
var $w = $(window),
$vids = $("iframe[src*='youtube'], iframe[src*='vimeo']");
// Save aspect ratio of videos
$vids.each(function() {
var aspectRatio = $(this).width() / $(this).height();
$(this).attr("data-aspect-ratio", aspectRatio);
});
$w.resize(function() {
// Adjust video width fluidly
$vids.each(function() {
$(this).width($(this).parent().width());
$(this).height(Math.floor($(this).width() / $(this).data("aspect-ratio")));
});
}).resize();
});
It's advisable to throttle or debounce the resize function (see link here), especially if there are multiple videos on the same page, as frequent resizing may impact browser performance.
What is the reason for using overflow: hidden; in this case?
A better approach would be to use a div element to center an element, like so:
#content
{
width: 400px;
height: 300px;
}
#centered_content
{
padding: 20px;
margin: 0 auto;
}
<div id="centered_content">
<div id="content">
[content goes here]
</div>
</div>
My SVG file consists of a single element with a fill set to red: <svg width="100" height="60" viewBox="0 0 100 60" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill="red" d=&qu ...
I am having trouble with a div that I have declared. The click event is not working as expected, and I also need to use the :hover event in the css, but it isn't functioning either. What could be causing this issue? <div id="info-button" class="in ...
As a PHP developer with a newfound interest in JavaScript, I took it upon myself to learn AngularJS and jQuery. However, I recently discovered that simply mastering Angular is not enough - Bootstrap is also necessary. My only issue is my fear of CSS; handl ...
I've encountered an issue with positioning dialogs on different pages. I tried using a CSS code to center them on the screen, but it didn't work as expected. .ui-dialog{ position: fixed; top: 50%; left: 50%; margin-top: -50px; ...
After starting from scratch, I rebuilt it with freshly downloaded angularJS (version 1.5.8). I simply placed both angular.js and angular-route.js in the library folder following this setup: https://gyazo.com/311679bf07249109671d621bc89d2d52 Here is how in ...
After recently updating my Google Chrome browser, I noticed that some of the fonts are not displaying correctly. Interestingly, they appear fine on other browsers, but the issue only seems to occur in Chrome v32.0.17...76 m. The fonts I used were "Open Sa ...
My goal is to retrieve a value from a hidden inputbox using JavaScript. However, I am encountering issues where sometimes I receive an "undefined" error and other times there is no output at all. When I utilize alert(document.getElementById('hhh& ...
There seems to be a padding issue that is only affecting mobile devices. https://i.stack.imgur.com/2Tbuc.png The cause of this problem has been somewhat identified, but the solution isn't clear without impacting the preview on computers. Here is th ...
I'm facing an issue with react-bootstrap mapping in my component whereby I encounter the following error: Cannot destructure property 'Title' of 'fac' as it is undefined. It seems like there's an error when trying to de ...
I'm currently working on an Ajax request that uploads images to the Imgur API and I want to implement a progress bar to show users the upload progress. I found some guidance in this thread, but it seems to display only 1 and stop working. This is the ...
I'm currently working on an app that includes surveys. In this app, users are required to answer by selecting either the Yes or No button. The desired behavior is for the chosen button to turn blue once clicked, while the other button should maintain ...
I have a list of six option values retrieved from a database table, including #blog and #hariciURL, among others. In another table, I need to disable the options that match values in an array, except for #hariciURL which should never be disabled. How can ...
Currently working on a website using only HTML and CSS. I am still learning the ropes in this area. My goal is to create a layout with a header, body, and footer that repeat to fill up the entire page, similar to envato.com. Here is a snippet of the code I ...
I need to remove the CSS styling from an image, but I can't modify the generated code where it's coming from. My actual code looks like this: <div class="bubble"> <img id="one" src="/static/webupload/MyronArtifacts/images/descarga.png ...
I encountered a situation where I have a table element with a select element inside its td. The id of the table (in this example, it is "table1") could potentially change. So my query is, how can I retrieve the selected option using the table ID in JQuer ...
Although I am well-acquainted with Construct 3 platform, I now have an interest in website development. Specifically, I would like to incorporate a character-like object into my web project that moves similar to a game character. While I know how to achiev ...
How can I target the first drop down node (select element)? I have tried using this code to focus on the first input, but I am looking for a way to target the first select (drop down). $('.modal :input:first').focus(); Unfortunately, this meth ...
Check out my website at bee-barcelona.herokuapp.com I'm facing an issue where the menu overlaps with the logo when I resize the browser or view the webpage on a tablet. I want to fix this using CSS. What changes do I need to make to ensure that the e ...
I am currently facing an issue where I am attempting to pass HTML elements of a form through the submit function as parameters. I have been able to successfully retrieve the nameInput element using #nameInput, but when trying to access the select element ( ...
I am looking to implement a drop-down navigation bar on the top right and a pop-up button/links on the top left. The drop-down menu should appear when the screen size reaches a certain pixel width. If you can't see the drop-down navigation (NAV), adju ...