Is it possible to update the background image of my iframe video?

I'm looking to customize the play button on a video displayed through an iframe on my website.

Here is the code snippet I've been working with:

.ytp-cued-thumbnail-overlay-image {
background: url(https://www.example.com/images/video-play-button.jpg);
}

button.ytp-large-play-button.ytp-button {
    z-index: -1 !important;
}
<iframe width="420" height="345" src="https://www.youtube.com/embed/XGSy3_Czz8k"></iframe>

Is there a way to apply a custom background image and modify the play button styling as desired?

htmlcss

Answer №1

Give this javascript code a try:

#background-video {
        background-image: url('http://placehold.it/580x460');
        background-repeat: no-repeat;
        padding: 50px;
}

#vidwrap {
        background: url('http://www.edu.uwo.ca/img/click_to_play.png') no-repeat center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        overflow:hidden;
        background-repeat: no-repeat;
        width:480px;
        height:360px;
        cursor:pointer;
}
    <div id="background-video">
        <div onclick="play();" id="vidwrap"></div>
    </div>

    
    <script type="text/javascript">function play(){document.getElementById('vidwrap').innerHTML = '<iframe width="480" height="360" src="http://www.youtube.com/embed/7-7knsP2n5w?autoplay=1" frameborder="0"></iframe>';}</script>

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

What is the best way to use PHP in order to retrieve the element containing the visit ID from the specific row within an HTML table?

I am working on a project that involves populating an HTML table with data from a database. The table includes an approval button for administrators to approve visits and change their status to APPROVED. I am trying to figure out how to select the element ...

phphtmldom

Troubleshooting Boostrap Check Box Styling Problem in MVC 5

My registration form has a problem with the checkbox's alignment. I want the text to appear to the left of the checkbox, in line with the placeholders for the input fields on the page. Currently, the text is either above the checkbox (centered in its ...

csshtmlasp.net-mvc-5

Can the start and stop times of the typed.js plugin be controlled for typing text?

The typed.js jQuery plugin creates the illusion of text being automatically typed on screen by a robot. Despite researching the resources related to this plugin, I have not come across any information on how to control the starting and stopping of the typi ...

javascriptjqueryhtmlcssautomation

extract all elements from an array nested within another array

I am having difficulty extracting data from an array file in PHP. I was able to read it and convert it into a PHP array, but now I want to display the stored information in a table, however, I keep getting incorrect values. How can I retrieve the informat ...

javascriptphphtmlarrays

What is the best way to create a single HTML file that can showcase several different pages?

I am just starting out in web design, and I am currently working on a hobby project which is an e-commerce site. My issue is that I don't want to manually link every single product page. This would result in a large number of HTML files. Instead, I w ...

phphtmldynamicbinding

Tips for expanding a fabric canvas to match the entire width of its parent division

specific scenario I have a cloth canvas placed inside a main section. How can I expand the canvas to cover the entire width and height of its container? Here is what my current code looks like: <div class="design_editor_div"> &l ...

javascripthtmlcsshtml5-canvasfabricjs

Why is $(window).load() being executed twice?

When using $(window).load() to resize images in a thumbnail gallery and set up a slideshow, the code seems to be running twice. This can be observed by noticing that a div is being wrapped around another div twice when inspecting the HTML on page load. Af ...

javascriptjqueryhtml

Obtain Python script output displayed in HTML format

I am currently working on developing Python scripts that can be utilized by front-end HTML+CSS developers for websites. To test the feasibility of this approach, I have written a basic script that makes use of parse.com as the backend. The script retrieves ...

pythonhtmljsonparse-platform

The dropdown functionality in Bootstrap appears to be malfunctioning

Struggling to make the drop-down menu function properly in Bootstrap, but so far no success. Check out the code on this jsfiddle link. <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-to ...

cssdrop-down-menubootstrap-4

npm installation for phonegap failed due to shasum check discrepancy

I've attempted numerous times, but I keep encountering this error (shasum check failed) 4784 error Error: shasum check failed for C:\Users\FENGXI~1\AppData\Local\Temp\npm-7004-QbpFFte5\1387269030233-0.28223602287471 ...

htmlnode.jscordovanpm

What is the best method for style.scss to communicate with style.css - should it be through @import, --watch,

As I observe the use of @import with mixins and partials in the code, I find myself puzzled as to why the programmers did not simply write @import style.css. Instead, they imported Susy, bourbon, vendors, utilities, and bases. It's a bit confusing to ...

htmlsassweb

CSS has inexplicably ceased to function properly, with the exception of the body

My roommate submitted his project, but only the CSS for the body tag and Bootstrap elements are working properly. When inspecting the webpage, I noticed that none of the CSS changes were showing up, even after editing the Sublime file (except for the body ...

htmlcss

Push the accordion tab upwards towards the top of the browser

I am working on an accordion menu that contains lengthy content. To improve user experience, I want to implement a slide effect when the accordion content is opened. Currently, when the first two menu items are opened, the content of the last item is disp ...

javascriptjquerycssaccordion

The jQuery fadeToggle function toggles the visibility of an element starting from hidden instead

I'm having an issue where text in my div only appears on the second click, instead of the first. What could be causing this problem? $('#fPaperCirclePic').on('click', function () { $('#fPaperCircleText, #isargebla, #moq10 ...

javascriptjqueryhtmlcss

JavaScript: Use onclick events to change the class of a div on multiple divs

I have a jQuery script that allows for toggling of the parent class when #icon is clicked. Additionally, when the body is clicked, it reverts back to the original class. Now, I'm looking to achieve the same behavior when clicking on #item5 or #item4 a ...

javascriptjqueryhtmlcss

What is the best way to extract a single image from JSON data using AngularJS?

Using ng-repeat in HTML, how can I display only a single image instead of all images? <img class="size" ng-src="{{image.image}}" /> In CSS, I aim to define the size of the image. .size { margin-left:0.3em; width:11em; height:11em; border:0.4em sol ...

htmlcssjsonangularjs

What is the best way to resize an element such as an image?

When an image is resized using a percentage, it preserves its aspect ratio properly. I am looking for a way to replicate this behavior with a div. My current challenge involves precisely positioning an element relative to an image. The image fills 100% of ...

javascriptjqueryhtmlcsssass

Utilize the <a> element as a button to submit the data form

I am looking to transfer data from a form to another PHP page without using a button within the form itself. Instead, I have placed a separate button outside of the form for submission. How can I achieve this by sending the form data to the other page? Bel ...

javascriptphpjqueryhtmlforms

Reactjs Rendering problem with retrieving data from the backend in a popover

Take a look at the test environment where this problem is occurring https://codesandbox.io/s/nice-cache-kl12v My website design is being done with antd. Right now, I'm facing an issue where I need to display notifications to the user, which are acces ...

javascripthtmlcssreactjsantd

Creating a sticky footer using Vue.js for both mobile and desktop display views

Looking for a solution to create a sticky footer that works on both desktop and mobile views without overlapping the main content? The current code either overlaps or doesn't stick to the bottom. Seeking a responsive approach. App.vue: <template& ...

htmlcssvue.jsfooter