Having trouble getting the height to work properly on your Blogger Blogspot template?

Issue with embed height=100% not working

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><$BlogPageTitle$></title>
<style>html,body{margin:0;padding:0;background:#000;border:0;height:100%;width:100%}</style>
</head>
<body style="padding:0;margin:0;border:0;height:100%;width:100%">
<Blogger>
<$BlogItemBody$>
</Blogger>
</body>
</html>

Demo link: The frame video player doesn't show (height = 0).

htmlcsstemplatesheightblogger

Answer №1

Your CSS code is currently only applying the height attribute to the body element, neglecting the divs with the ids "playbox" and "player," resulting in their height remaining at 0.

It seems like you may be trying to embed a player from another site. Do you have a functional example of this player that you can refer to? It's often easier to start with a working example and then incorporate it into your own code instead of manually styling elements of the player.

There could possibly be a deeper issue causing nothing to appear inside the box, leading to its height being set at 0.

You can attempt targeting specific elements by their IDs using CSS, such as:

#player #playbox{
    height: 100%;
}

However, it's likely that this approach may not solve your problem entirely.

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

Unable to include below the heading for the images

As I venture into the world of HTML, I am facing a challenge with placing titles below two images. Every time I attempt to add either h or p, the text ends up on the right side instead of below the images. What could I be doing wrong? This is all part of ...

csshtml

generate a customized synopsis for users without storing any data in the database

In order to provide a summary of the user's choices without saving them to the database, I want to display it in a modal that has already been created. Despite finding some sources online, none of them have worked for me so far. Below is my HTML: &l ...

javascriptjqueryhtmlcss

Concealing overflow in a sticky container when a fixed child element is present

I am currently working on a website where I have implemented slide-up section panels using position: sticky while scrolling. However, I am encountering issues with fixed elements within the sticky panels not properly hiding outside of the respective sectio ...

javascripthtmlcssreactjs

Finding the precise top offset position with jQuery upon scrolling – a step-by-step guide

I need help with detecting the offset top of a TR element when it is clicked. It works fine initially, but once the page is scrolled, the offset().top value changes. How can I resolve this issue? $(function() { $('tr').click(function() { ...

javascriptjqueryhtmlcss

"Stay informed with the latest updates on Wordpress through our

I am currently working on creating a static homepage with a newsfeed, but I only want to display the title and date posted. I considered using a widget, but I plan to integrate this news feed with a slideshow in the future and didn't want to limit my ...

htmlwordpressfeed

Problems with scrolling in the navigation bar, main content area, and footer

The challenge Encountering a scrolling anomaly with the Navigation Bar, Body, and Footer while utilizing Bootstrap 4. Everything appears to function smoothly on the desktop view. The glitch arises when I reduce the viewport size. The body fails to stay in ...

htmlcssbootstrap-4

Half-height rows and columns in Bootstrap 4

Can someone help me create blocks similar to the one shown in the image? The left block should be col-5, while the right block should be col-7. The right block needs to have two rows with a height that is 50% of the left block. Is there a way to achieve ...

cssflexboxbootstrap-4

Error 404 - CSS file missing: encountering a 404 error while attempting to execute Flask code

Hello there! I'm still getting the hang of programming, especially when it comes to web development. Recently, I encountered an issue with my CSS file - whenever I link it to my HTML and run the Python code, I get an error saying that the CSS file can ...

pythoncsshttp-status-code-404

Accessing an element by its ID with the help of a looping

Looking to retrieve a string from my database and insert it into my paragraphs: <p id="q_1"></p> <p id="q_2"></p> The following code works correctly: $.get("bewertung/get/1", function (data) { document.getElementById("q_1") ...

javascriptjqueryhtmlnode.jsexpress

Trouble with the functionality of the Bootstrap collapse button

I am facing an issue where clicking on the collapse button does not trigger any action. I have tested it on both of my laptops, ruling out any problems with the web browser. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

jqueryhtmlcsstwitter-bootstrap-3

The issue of column sizing in bootstrap 4 needs to be resolved

I'm having trouble making the form input fill the width of the screen on small devices. It works fine on larger screens but doesn't respond properly on phones like it should. <div class="container-fluid"> <div class="row"> ...

htmlbootstrap-4responsivecol

Loading elements of a webpage in a consecutive order

I am currently working on implementing a content slider within my Django application. The specific slider that I am using can be found at this link. One challenge that I am facing is the need to load close to one hundred 'contentDiv' pages, and I ...

javascriptjquerypythonhtml

Converted my Flask code into a specialized software package, encountering a perplexing TemplotNotFound error

After reorganizing my Flask code into a Python package structure, I am facing an issue where none of the HTML templates can be found when I run the code. Let me outline the simplified structure of my current Flask package. The run.py file is responsible f ...

pythonhtmlflask

The endpoint for 'create_chat' with given parameters '()' was not located. Only one pattern was attempted: 'create_chat/(?P<id>[0-9]+)/$'

Hello everyone, I am currently working on developing a chat application using Django Version 3.8.1. I have encountered an error that is causing some issues for me. The specific task at hand is to create a view for private chat with a friend. views.py def ...

pythonhtmldjangodjango-views

Personalize the appearance of dynamically generated DIV elements

This script generates a random number of squares (ranging from 20 to 40) and adds text to each square. The script then calculates the width of each square so that they all fit in a single row. Here is the code snippet: var quantity = Math.floor(Math.ran ...

javascriptcss

What is the best way to display a mySQL database in an HTML div table?

Showcasing the grades in a table format: username assignment weight mark a a1 10% 50% b a1 10% 60% Can this be achieved using PHP/HTML? <div class="a"> <div class="divTabl ...

phphtml

Finding a specific element within a table using xpath in selenium proved to be a challenge

I am trying to click on a specific button inside a table where each row has an update button. Here is what my table looks like: <table _ngcontent-vhp-c82="" datatable="" id="dtOptionsComments" class="display table tabl ...

c#htmlseleniumselenium-webdriverxpath

Can bootstrap columns be offset only on large devices?

Is there a way I can have the title column float to the right side of the page only on medium devices and larger screens, while keeping it centered for smaller devices like phones? Any advice is appreciated! <div class="section header"> <div ...

htmlcsstwitter-bootstrap

Preserving the selected options in a dynamically populated dropdown list after submitting a form using php

I am attempting to preserve form values even after submitting the form. document.getElementById('start_date').value = "<?php echo $_POST['start_date'];?>"; document.getElementById('end_date').value = "<?php echo $_P ...

javascriptphpjqueryhtml

"Enhance your client-side PDF capabilities with the pdfMake plugin, offering support for multiple languages

I am in search of a plugin that can convert HTML content into a PDF format and is compatible with javascript/jQuery/AngularJS. It must also provide multilingual support. I have experimented with the following two plugins, but encountered limitations with ...

javascriptjqueryhtmlangularjs