Height of video isn't increasing

Since moving my website to a new domain, I've noticed that the video on my NEW About Us page is shrinking for some reason. It seems like the div holding the iframe is not expanding beyond 181px. When it does grow, the video adjusts itself and expands accordingly. This functionality was working perfectly on the old link.

Could someone please investigate this issue and find out why the second link isn't displaying the video correctly like the first one? The video in question is at the top and is considered the main video.

Link with GOOD VIDEO:

Link with BAD VIDEO:

javascriptjqueryhtmlcsswistia

Answer №1

There have been updates to the stylesheet rules that you'll need to address in hubtheme-style.min.css:

.hs-responsive-embed iframe, .hs-responsive-embed object, .hs-responsive-embed embed {
    position: absolute;
    left: 0;
}
.hs-responsive-embed, .hs-responsive-embed.hs-responsive-embed-youtube, .hs-responsive-embed.hs-responsive-embed-wistia, .hs-responsive-embed.hs-responsive-embed-vimeo {
    padding-bottom: 56.25%;
}

To easily identify these changes moving forward, consider beautifying your stylesheets and using a diff tool. I suggest utilizing difftool.net, as it focuses on highlighting text differences without overwhelming you with unnecessary information from large files.

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

Is there a way to trigger a confirmation function for form submission exclusively when clicking one specific submit button, and not the other?

Here is the layout of my form: <form action="newsletter.php" name="newsletter" id="newsletter" method="post"> <input type="submit" value="Submit" class="c-btn" id="submit_value" name="submit_value"> <input type="submit" value="Send" cla ...

javascriptjqueryalertform-submit

Preserving image button states after a page refresh in PHP: a step-by-step guide

One issue I'm facing is maintaining the state of image buttons after a refresh or logout. Each article on the page has a favorite button that users can click to mark it as their favorite. To send the unique post ID to a MySQL table, I utilize the foll ...

phpjquerymysqlsessionpost

Issue with displaying background image in h2 element

Consider me a novice who learns primarily through trial and error. Unfortunately, I'm stuck on this particular issue. My goal is to have an image appear behind the h2 text on my homepage, but despite my efforts, I can't seem to make it work. You ...

cssimagewordpressbackground-image

Is it possible to create an image or logo that moves in sync with the user's scrolling

Having trouble articulating this question, but I'm trying to replicate the logo in the top right corner of this website: I want the logo to move along with the user as they scroll down, remaining visible at all times. Any ideas on how to achieve this ...

htmlcssimagescroll

Why does col-sm-12 not fill the entire width on smartphones? Am I missing something?

SASS Breakpoints Definition: /* For the grid */ $grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1440px, xxxl: 1660px ); Structure of My Columns: <div id="footer_lower_menus" class="row"> ...

htmlcsstwitter-bootstrapsassbootstrap-4

Pass focus to the next element as you navigate through the page using jQuery/Javascript

Currently, I am in the process of developing a jQuery plugin for 'tag input', but I have encountered a minor issue. After adding a button following a text input in a form and using JavaScript to provide functionality for the button, I face a cha ...

javascriptjqueryaccessibility

Dependencies for Grunt tasks

I am facing some issues with a grunt task named taskA that was installed via npm. The task has a dependency on grunt-contrib-stylus, which is specified in the package.json file of taskA and installed successfully. However, when I run grunt default from the ...

javascriptnpmgruntjs

Utilizing the HTML5 Download attribute for linking to external files

I am currently developing a web application for my own personal needs. One feature I would like to implement is the ability to set the download attribute on certain links. However, I have run into an issue where the files to be downloaded are hosted on ex ...

javascripthtmlcross-domaingreasemonkey

The lack of flexibility in this element stems from the fact that it is not classified as a flex item

I'm facing an issue with flexbox and its unusual behavior. I have set up flexbox for the parent element and used flex: 1 1 100%, but it's not working as expected. When I checked in Firefox Developer Tools, it says that the parent is not a flex co ...

htmlcssflexbox

Simplest method for transforming static HTML files within SharePoint

My current challenge involves converting numerous static HTML documents to SharePoint (MOSS 2007). The documents can remain static, but they need to be integrated into the SharePoint site with its look and feel. Each page must be updated with the SharePoin ...

htmlsharepointmigrationsharepoint-2007

tweetable fails to display any content within the div

I am attempting to showcase a Twitter feed similar to how it's done on Washio. They are utilizing both Tweetable 2.1.1 and Timeago 1.3.1, just like I am doing. As per the examples provided in the documentation for both plugins, this setup should func ...

jquerytwitter

How to display two elements side by side within a div using React

I have an array that looks like this: const arr = [1,2,3,4,5,6,7,8,9,10] I am looking to display the elements in pairs per line within two-dimensional divs. Here is what I have in mind: This represents the main React element: render() { return <di ...

javascriptreactjstypescript

Imitate a HTTP request

Currently, I am working on developing a front-end application using Angular (although not crucial to this question). I have a service set up that currently supplies hard-coded JSON data. import { Injectable } from '@angular/core'; import { Obser ...

javascriptajaxangularhttp

What is the best way to refresh the data source of my KendoUI Grid from the controller?

I am facing an issue with my Kendo Grid in the MVC application. The grid's method retrieves data from the repository, and there are buttons that pass arrays of data to the controller to adjust the results. Although the controller shows the updated dat ...

c#jqueryasp.net-mvckendo-ui

Obtaining an Array through a direct input on the command line

I am having trouble incorporating raw command line arguments in my Node.js application. When I try with simple variables, everything works as expected (node example.js variable) However, when I pass an array as an argument, it does not work properly (n ...

javascriptarraysnode.jsarguments

ensuring that there is no wrapping and the children have a width of 100%

Would you like to have text inputs placed in a single line inside a div without manually setting their widths? <div> <input type="text" /> <input type="text" /> <input type="text" /> </div> div { width: 300px ...

css

Using a video as a background in HTML

My code has an issue where I have set overflow: hidden in the CSS but the video is still not displaying below the text as intended. The relevant CSS snippets are: fullscreen-bg { top: 0; right: 0; bottom: 0; left: 0; overflow:hidden ...

htmlcss

What are some strategies for handling analytics tracking in Flux architecture?

Imagine I'm working on a cutting-edge single page application similar to Airbnb. One essential aspect of such an application is keeping track of when someone signs up for an account. There are numerous services available to assist with tracking, incl ...

javascriptreactjsreduxanalyticsreactjs-flux

How can the results of an AJAX JSON request be effectively showcased?

When I make a call via ajax to an api, what is the simplest way to display the result? If I use alert on the result, I only see [object object]. If I try to alert a specific item that I know is in the returned JSON (results.title, for example), I get an &a ...

jqueryajaxjson

Leverage a function in an external JavaScript file within Angular 4

I am facing an issue while attempting to integrate a JavaScript file into my angular component. I have successfully loaded the full minified version from this source: https://github.com/blueimp/JavaScript-Load-Image/blob/master/js/load-image.all.min.js and ...

javascriptangularimportreferenceerror