Embedded video will only be visible if the browser window size is adjusted

Encountering an odd issue with video embedding.

When I visit in any desktop browser (like Chrome or Edge) and scroll down to the "Troubleshooting" question, the embedded YouTube video on the right is missing. However, resizing the browser window causes the video to mysteriously appear!

I've tested this across different browsers and computers, all showing the same problem. Interestingly, the issue doesn't occur when viewed on a mobile device.

Below is the code snippet used for embedding the video:

.codegena {
  position:relative;
  width:100%;
  height:0;
  padding-bottom:56.27198%;
}

.codegena iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

<div class="codegena">
  <iframe width="560" height="329" src="https://www.youtube.com/embed/OwlGTVh06NQ?&amp;modestbranding=1&amp;rel=0" frameborder="0" allowfullscreen="">
  </iframe>
</div>

No clue what's causing this strange behavior.

htmlcsswordpressembed

Answer №1

Upon reviewing your website, one glaring issue stands out. After inspecting the developer controls, it appears that the video's iframe has a width and height of 0. To rectify this, adjust the css as follows:

iframe{
    width: 602px;
    height: 337.12px;
}

If this website doesn't belong to you, then this may not be your problem. However, it might still be worth mentioning to the site owners.

Answer №2

Big shoutout to @agent-biscutt for steering me in the right direction. After further adjusting the suggestion, I decided to add !important to the width and height of the iframe, which did the trick. The video now displays properly and is responsive. While I understand that using !important in CSS isn't always recommended, it seemed necessary in this scenario. Here's the modified code snippet:

.codegena iframe{
  position:absolute;
  top:0;
  left:0;
  width:100% !important;
  height:100% !important;
}

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

Creating visuals from written content

I am attempting to transform Y[0] into an image rather than text. Currently, it is only displayed as a plain text link and not as an image. <html> <head> <script type="text/javascript"> function modifyContent(){ var rows=document.g ...

javascripthtml

Collapsing the margin

Are vertical margins collapsed between a floated box and another box? Do the margins of absolutely positioned and relatively positioned boxes collapse together? ...

css

The <form> element is giving me headaches in my JavaScript code

Trying to troubleshoot why my HTML pages render twice when I add a form with JavaScript. It seems like the page displays once with the script and again without it. Below is the basic HTML code: <form action="test.php" method="post"> <div class=" ...

javascripthtmlforms

Issue with form submission not redirecting as expected

Currently working on a website using the WP platform and facing an unfamiliar issue, seeking assistance from anyone who can provide some insight. I have created a form that redirects to a "sent/thank you" page upon submission. The redirect is executed usi ...

phpwordpressformssubmit

A guide on dynamically altering text upon hovering over an element using Vue.js

On my website, I have the following HTML code: <div class="greetings"> <img @mouseover="hover='A'" @mouseleave="hover=''" src="a.png" alt="A" /> <img @mouseover="hover='B'" @mouseleave="hover=''" ...

javascripthtmlvue.js

Understanding the use of v-html in Vue.jsORDec

I am currently working on a page where I am fetching an html string using Wordpress' REST api. My goal is to create a Navbar component that can analyze the html, identify heading tags, and generate anchor links for each header. Is it feasible to utili ...

wordpressvue.jsheadless

Comparison between Bootstrap dropdowns and adjusting document height dynamically

I am in the process of constructing a webpage utilizing Bootstrap 4 Shards. I have several dropdowns, some of which are initially hidden using .d-none. The issue arises when these dropdowns start adding height to the document as they unhide, causing the po ...

htmlcssbootstrap-4dropdown

Selecting specific categories to display on the homepage and limiting the number of images shown

<<html> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>Gallery</title> <!-- CSS only --> <link href="https://cdn.jsdel ...

htmlcssdjangotemplatesbootstrap-5

The spacing issue for Bootstrap-5 justify-content is causing elements to not have any space in between

My goal is to separate 3 images with space around or space between based on my preference. However, the images seem to remain clustered together in the middle instead of being spread out with justify-content-around. I attempted adjusting the width of the ...

htmlbootstrap-5justify

The Laravel return view function seems to be malfunctioning as it is displaying an error page instead

I am facing an issue where I am trying to display an existing view but instead of the show page, I keep getting a "404 not found" error. As a beginner in Laravel, I am still trying to grasp its concepts. Any insights into why I am encountering the error 40 ...

phphtmllaravel

Google map with a fully visible HTML element on top

When certain points on a Google map are clicked, a small popup box appears. This works fine in the regular small Google map mode. However, when the Google map is switched to full screen mode by clicking the full screen button (which is shown when `fullScr ...

javascripthtmlcssgoogle-maps-api-3

Implement a trigger to activate toggling functionality

<span id="test">​click</span>​​​​​​​​​​​​​​ $('#test').toggle(function() { alert('true'); }, function() { alert('false'); }); $('#test').trigger('click') ...

javascriptjqueryhtml

The HTML grid is causing an irritating excess space on the right side of my website

After brainstorming an idea, I decided to create this website for testing purposes. However, the grid layout seems to be causing an unwanted margin on the right side of the page that is not associated with any HTML tag, disrupting the zoom functionality. ...

javascripthtmlcssmargin

Incorrect display of French characters in emails

Issues arise when sending emails with French characters, as they are not displaying correctly in the mail body. I made sure to include the following code in my HTML page: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> Despit ...

htmlemailasp-classic

Horizontal representation of data utilizing PHP and MySQL

Hey there, I'm trying to showcase data from a mysql table in an HTML table horizontally. The code I've got below is almost perfect, except it's skipping the first record (starting at the second) in my database. My gut says it's somethin ...

phphtmlmysqlcss

Struggling with choosing a specific subcategory from the menu

Having trouble navigating through the submenus? Here's a solution! *,body{ margin: 0; padding: 0; box-sizing: border-box; list-style-type: none; font- ...

htmlcssmenu

What causes the translation of text within HTML tags to occur when attempting to retrieve it during Web Scraping?

Exploring the world of web scraping, I am currently immersed in a small project. In this snippet of code, I am capturing the HTML content and storing it in a variable named soup. source=requests.get(URL) soup=BeautifulSoup(source.text,'html.parser&apo ...

pythonhtmlweb-scrapingbeautifulsouppython-requests-html

Each div in prevAlll() will have its own unique CSS background

In continuation of my initial query, which has now been resolved, you can find the original question here. JS: $(function() { var scaletext = { 1: 'SA', 2: 'A', 3: 'N', 4: 'Da', 5: 'SDa' } $(&a ...

javascriptjqueryhtmlcss

The sequence of HTML attributes

Could there be a subjective angle to this question (or maybe not)... I work on crafting web designs and applications using Visual Studio and typically Bootstrap. When I drag and drop a CSS file into an HTML document, the code generated by Visual Studio loo ...

javascripthtmlcssattributescoding-style

Using various colors to highlight specific sections of a letter or number

I am striving to recreate the unique image shown below, particularly interested in achieving the multi-colored effect on the numbers. This aspect of having different colors for parts of the number is intriguing and I would love to learn how it's done. ...

javascripthtmlcss