Surround an embedded YouTube video with a styled DIV

I'm having an issue with embedding three YouTube videos on a page. I wrapped them in a DIV and gave them a CLASS of "videoplayer". However, the DIV and CLASS don't seem to be displaying on the page.

To view the problem, check out:

Below is the CSS that's being used:

.videoplayer {
border: 1px solid #1D740C;
height: 384px;
width: 480px;
padding: 0px;
margin-left: 25px;
margin-bottom: 25px;

}

I've checked extensively and it seems like the DIV and CLASS are not being recognized at all, even though they are present. Has anyone encountered this issue before, or could it be against the rules?

cssyoutube

Answer №1

Instead of enclosing the player in a div and adding a custom class, why not just utilize the default class of the player youtube-player for your styling needs:

.youtube-player{
    border: 1px solid #1D740C;
    height: 390px;
    width: 480px;
    padding: 0px;
    margin-left: 25px;
    margin-bottom: 25px;
}

Check out this working example on jsfiddle: http://jsfiddle.net/Damien_at_SF/guSAC/1/

This approach eliminates the need for a parent div and resolves the issue you mentioned above :)

I hope that suggestion proves helpful :)

Answer №2

On your webpage, there is a div element with the class "videoplayer", but it will not perform any special functions unless you add some CSS styling. To make the div visible, consider adding a background color, border, or other styling properties such as:

div.videoplayer {
background:black;
border:2px solid red;
padding:10px;
}

...or something similar to enhance its appearance.

Answer №3

The div is present, but it may not be visible in the browser without using some tools. Did you try any specific tools to locate it? I recommend trying Firebug, as it only took me 3 seconds to find it using the search feature.

Is inserting an object tag inside a div against the rules?

No, it is definitely allowed. Placing an object tag within a div is completely acceptable.

Answer №4

It has come to my attention that you have overlooked adding a closing tag for at least one of your divs

  <div class="videoplayer">
    <iframe title="YouTube video player" class="youtube-player" type="text/html" width="480" height="390" src="http://www.youtube.com/embed/icAFUlsysqg?rel=0" frameborder="0"></iframe>
  <!-- remember, the </div> tag is missing here, please insert it -->
  <div class="videoplayer">
    <iframe title="YouTube video player" class="youtube-player" type="text/html" width="480" height="390" src="http://www.youtube.com/embed/WC0E9jHw1B8?rel=0" frameborder="0"></iframe>
  </div>
  <div class="videoplayer">
    <iframe title="YouTube video player" class="youtu 
      be-player" type="text/html" width="480" height="390" src="http://www.youtube.com/embed/ayJbo1-ReBc?rel=0" frameborder="0"></iframe>
  </div>


Additionally, it's recommended to add CSS styling for this class :)

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

Adjust Element Width Based on Scroll Position

I'm attempting to achieve a similar effect as seen here: (if it doesn't work in Chrome, try using IE). This is the progress I've made so far: http://jsfiddle.net/yuvalsab/op9sg2L2/ HTML <div class="transition_wrapper"> <div ...

javascriptjqueryhtmlcss

Could jQuery and CSS be utilized for image enlargement?

Is it possible for jQuery (or CSS!) to detect an area around the mouse when hovering over an image, capture the image underneath, and then zoom in on that area? This concept differs from typical jQuery zoom effects where there are two separate images - sm ...

jquerycss

Resolving the issue of nested modals within Bootstrap

I am experiencing some issues with my customer visits list page. When I try to add a visit, it opens a bootstrap popup ("#Pop1") to record the visit details. Within this modal, there is an option to add a new customer on the spot, which then triggers anoth ...

javascriptjquerycsstwitter-bootstrapmodal-dialog

What is the best way to maximize the size of an image without causing the parent div to expand in height?

I have utilized the code below directly from the example provided at https://getbootstrap.com/docs/5.2/utilities/flex/#media-object. This code is meant to generate a box containing an image on the left and text on the right: <div class="mycard bord ...

csstwitter-bootstrapbootstrap-5

How can CSS files be shared among multiple projects within Visual Studio 2012?

I am working on a Visual Studio Project Solution that includes 3 separate projects. To streamline the process and avoid duplication, I aim to have a shared CSS file for all 3 projects since they all follow the same CSS rules. Despite trying the Add As Lin ...

c#cssvisual-studio-2010

Ways to ensure text fits nicely within a container: HTML & CSS

Below is a code snippet: @import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans'); .square { max-width: 460px; background: white; border-radius: 4px; box-shadow: 0px 5px 20px #D9DBDF; -webkit-transition: all 0. ...

javascripthtmljquerycsssass

Why did the bootstrap installation in my project fail?

Previously, everything on my website was functioning correctly. However, upon launching it now, I noticed that the carousel, buttons, and other elements are broken. It seems like there might be an issue with the Bootstrap CDN as the buttons and sliders are ...

javascripthtmlcssfrontendbootstrap-5

Gauging Screen Size: A Comparison between Media Queries and JavaScript for Adjusting Div Position

I am currently facing an issue with the banner on my website. It contains a slider and has a position set to absolute. The problem arises when viewing it on smaller screens, as only the left side of the wide banner is visible. Initially, I tried using med ...

javascriptcssmobilescreen

Turn off the custom CSS section in the WordPress Customizer for WordPress themes

Looking for assistance in locking or disabling the Appearance -> Customizer -> Additional CSS area on Wp-admin. https://i.sstatic.net/FXXSE.png I have referred to this codex: https://codex.wordpress.org/Theme_Customization_API. However, I couldn&ap ...

phpcsswordpresswordpress-themingwp-admin

I'm having trouble getting my flex items to maintain a specific width and height while staying in a single line

I've been out of practice with flexbox for some time and I can't figure out why the width and height properties are not being applied to each flex item as expected. All the items seem to have an equal width, but not the width that I specified. Ad ...

cssreactjssassflexbox

Troubleshooting Alignment Problems in Bootstrap 4 Tables

Having trouble aligning certain items. In thisFiddle, I have two options: Option1 and Option2. I want to align the toggle switches with the ones in the first two rows. Specifically, I want the toggle switches to be in the second column of the table and t ...

htmlcssbootstrap-4

What steps should I take to ensure that this website is responsive across all screen sizes?

Struggling with adapting to different screen sizes, especially with Bootstrap. Below are the images for reference: https://i.stack.imgur.com/AlCjA.png https://i.stack.imgur.com/FT2mU.png Sass source code snippet: body background: $main-background ...

htmlcsssass

What steps should be taken to create this specific layout using Vue-Bootstrap?

Currently tackling a web project and aiming to design two rows that resemble the following layout: https://i.sstatic.net/tLv1h.png Details of the screenshot (such as icons) are not necessary, but rather focusing on the arrangement of aligning two rows bes ...

htmlcssvue.jsbootstrap-4

Creating divs that adapt to different screen sizes without relying on flexbox

Currently, I am in the process of developing a chat interface where the viewport height is set to 100vh. The layout consists of a header/navbar, a "main content" section, and a footer housing the input field (you can view the code here) The way I have str ...

javascriptjqueryhtmlcssresponsive-design

Dynamic collapsible containers

I discovered a useful feature on w3schools for collapsing elements: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible_symbol However, I would like to reverse it so that all elements are initially shown when the page loads, and then ...

javascripthtmlcss

How to eliminate spacing between slides in a 3D Carousel Slider using Bootstrap 5

My website utilizes Bootstrap along with a carousel slider, which is functioning properly. However, I am encountering an issue when the slider transitions from right to left. It briefly displays a white space between slides, which I wish to eliminate. I wa ...

javascripthtmlcsstwitter-bootstrapbootstrap-5

Tips for utilizing comment tags efficiently

I have encountered an issue with IE7 where my CSS is not functioning properly. In an attempt to target IE7 and lower versions specifically, I inserted IE comment tags into the HTML code. However, despite my efforts, it does not seem to be effective. Initia ...

htmlcssinternet-explorer

The background image is not showing up

I've been grappling with a CSS background-image dilemma that's got me stumped. Here's the situation: CSS #yes { background-image:url("../tick.png"); background-repeat: no-repeat; height: 16px; width: 16px; }​ #no { backg ...

cssbackground-image

Using CSS to create hover effects for specific classes of elements

Is there a way to make the button change color on hover when hovering over anywhere in the navigation bar (.topNav) instead of just when hovering over the individual button elements (.top, .middle, .bottom classes)? I tried using span to achieve this, but ...

htmlcssangular

Add flair to the ButtonBase element within a Tab component

I'm currently exploring how to override Material UI styles with a nested component. For instance, what if I want to increase the bottom border height on an active Tab, which is applied by the underlying ButtonBase. Below is the style definition: con ...

cssreactjsmaterial-designmaterial-ui