What could be causing my CSS formatting from a linked style sheet to not be applied properly?

I've been trying to incorporate a YouTube video into my webpage using a CSS stylesheet, but I can't seem to get the video to display properly

.youtube-video iframe,
.youtube-video img,
.youtube-video-2 iframe,
.youtube-video-2 img {
    position: absolute;
    top: 0px;
    left: 12%;
    width: 890px;
    height: 500px;
    cursor: pointer;
}
img {
    vertical-align: middle;
}
<img class=" ls-is-cached lazyloaded" data-src="https://supertasker.pk/images/youtube-video-1-min-new.png" alt="Youtube-video" video-url="https://www.youtube.com/embed/-luUppOIWHA" src="https://supertasker.pk/images/youtube-video-1-min-new.png">

htmlcssformattinghtml5-video

Answer №1

.youtube-video iframe,
.youtube-video img,
.youtube-video-2 iframe,
.youtube-video-2 img {
    position: absolute;
    top: 0px;
    left: 12%;
    width: 890px;
    height: 500px;
    cursor: pointer;
}
img {
    vertical-align: middle;
}
<iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>

this code will not be executed here due to site restrictions. However, you can see it in action by visiting the following link: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_youtubeiframe

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

When the tailwind utilities are implemented, they do not appear on the screen

Recently, I embarked on a project using Tailwindcss/Next.js and encountered an issue when trying to apply a box-like shadow to a button with a new utility in pure CSS. Despite my efforts, the changes don't seem to take effect. Can you spot what I migh ...

cssnext.jstailwind-css

Is your email showing up with an unknown sender when using the display function?

I'm facing an issue where the name entered in the input field on a contact form is not being displayed after submitting the email. The headers in PHP were changed and now it shows "unknown sender" instead of the name that was entered. How can I fix th ...

phphtmlemail-validation

Firebug mistakenly detects phantom errors

<div id="video-player" data-src="http://www.youtube.com/embed..."></div> Inspect Element - Browser Developer Tools: Error: Access to property 'toString' denied I scanned the entire page (Ctrl+F) and could not find any reference t ...

javascripthtmlfirebug

NextJs only displays loading animation once

Currently, I am developing an app using Next.js and I am facing a challenge with implementing a loading animation. The animation I am attempting to incorporate consists of three bouncing balls which display correctly. When I launch the Next.js app with n ...

javascriptcssreactjsnext.js

Accessing Google Maps offline using HTML5 is a convenient and helpful

Our team is working on an HTML5 application that includes a Google map feature for changing search locations. Recently, we've added an offline version of the app as well. Is there a way to cache the Google map so that when the app is offline, it can s ...

jqueryhtmlgoogle-mapsjquery-mobile

turn the cube shape into one with smooth, rounded corners

Does anyone know how to create a cube with rounded corners using three.js? I've heard it's not possible with CSS. Any guidance on how to achieve this? Check out this link for an example /* |------------------------------------------| | MelonHTM ...

javascriptjquerycss3dthree.js

Adding some extra space inside a flex container using Bootstrap's padding

When attempting to use padding within a d-flex container to separate elements that are placed inline due to the d-flex class, I encountered an issue where the padding was not being applied and did not change anything. If I do not utilize the d-flex class, ...

htmlcsstwitter-bootstrapflexbox

Rotating out of the element with the transform rotate effect

I have rotated the text by 270 degrees and now I am facing the challenge of aligning it within another div. Here is the original image before I rotated the text: Below is the code I used for the layout: #infoside { background-color: #00ff00; flo ...

htmlcssvertical-alignment

The background image in CSS fails to display on IE11 when applied to a pseudo-element with the position set to fixed

Check out the issue showcased in JSfiddle: https://jsfiddle.net/qjtbchpu/11/ <div id="container"> <article> content here </article> <article> more content here </article> </div> #container::before { ...

cssinternet-explorercss-positionpseudo-element

Creating a switch statement that evaluates the id of $(this) element as a case

I have a menu bar with blocks inside a div. I am looking to create a jQuery script that changes the class of surrounding blocks in the menu when hovering over a specific one. My idea is to use a switch statement that checks the ID of $(this) and then modif ...

javascriptjqueryhtmlcssswitch-statement

Browsing the website through http://localhost instead of file:// while utilizing node.js

I am currently in the process of familiarizing myself with node.js. Everything appears to be running smoothly when I access the site from file:///C:/.../myfolder/index.html. The jquery and bootstrap files are located in the directories myfolder/css/ and m ...

htmlnode.jsserver

Looking to learn how to replicate data effortlessly with either javascript or jquery?

I am currently trying to figure out how close I am to successfully cloning this div. Honestly, I am a bit lost at this point and could really use some assistance. Should I consider using jQuery for this task? <div id="question20">20. Details of Chi ...

javascriptjqueryhtml

What are some of the top languages, libraries, and modules used to create a web application for constructing templates?

Our company specializes in creating websites for membership-based associations. Currently, we utilize custom DLL's created with CodeGear Delphi to connect with a SQL Server database and implement a unique HTML template language. Essentially, our templ ...

htmliistemplates

How to Exclude Specific Div from CSS Stylesheet Styling

Currently, I am utilizing the bootstrap CSS framework for a specific page on my website. The issue arises when the CSS styling included in Bootstrap interferes with the formatting of my sidebar by changing its color, font size, and font family. Is there a ...

htmlcsstwitter-bootstrap

New design in TinyMCE V5: Vertical toolbar labels arranged within a CSS grid layout

When TinyMCE version 5 is placed inside a CSS grid layout, the toolbar labels are displaying vertically. It appears that the "width:auto" property is not being applied correctly, and I am struggling to find a solution to fix it. I would greatly appreciat ...

csstinymce

Iterating over a table and selecting a specific button on the rows that meet a specific condition

I'm having a bit of trouble and would really appreciate your help. I'm attempting to write a script that will scan through this table and delete any row that contains the word "active". The script needs to check every row in the table. The code ...

pythonhtmlseleniumpytest

Guide to obtaining context vnode within vue 3 custom directives

Unable to retrieve context from directive <template lang="pug"> div(class="form") select(name="name" v-model="form.input" v-select="form.inputs") option(v-for="(option, ke ...

javascripthtmlvue.jspugvuejs3

Take away the attention from the span element

I have been experimenting with the following jsfiddle and attempted various methods suggested in this Stack Overflow thread, but I am struggling to remove the focus from the "feedback" span after clicking on the cancel button in jQuery confirm dialog. Her ...

javascriptjqueryhtmltippyjs

Switch Image to Background Image on Mobile Devices

I am currently working on a website that needs a special page for an upcoming event. Typically, the pages on this site have a mast banner image that stretches across the full width of the page. However, for this particular page, it is necessary for the ima ...

cssdrupalresponsive-design

How feasible is it to customize the "ionic-img-viewer" npm package or replicate its image styling in Ionic 2?

I am wondering if it is possible to edit or add additional styles when my image is viewed using the "ionic-img-viewer" npm package. Alternatively, how can I apply the same styles as those on my original image tag? For example, here is my img tag with some ...

imagecssnpmionic2