Struggling to get the video in the background to function properly with the controls

My website is built on Wordpress and includes the Easywpvideo plugin, which unfortunately doesn't have any support available.

We are looking to have a video playing in the background, with the ability for users to stop and start it as they please.

In addition, we want some content to overlay on top of the video.

This particular div is generated by the plugin:

<div id="video_background_video_0" style="z-index: 0; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; overflow: hidden;">

I've experimented with different options using .site { position:relative; z-index:1 or 100; }

Although this does bring the various content elements into the correct position, it unfortunately makes the video play button unclickable.

Is what we're trying to achieve simply not possible? Essentially, can we insert a video into the background of a page, have content displayed on top of it, and still have control over the video playback?

htmlcss

Answer №1

Ensure your code follows this structure:

       <div id="primary" class="content-area">
             <div id="video_background_video_0" style="z-index: 0; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; overflow: hidden;">
            <iframe id="video_background_video_0_yt" style="position: absolute; top: -179px; left: 0px;" frameborder="0" allowfullscreen="1" title="YouTube video player" width="1349" height="759" src="https://www.youtube.com/embed/1CXFhQ33_xs?loop=0&amp;start=0&amp;autoplay=1&amp;controls=0&amp;showinfo=0&amp;wmode=transparent&amp;iv_load_policy=3&amp;modestbranding=1&amp;rel=0&amp;enablejsapi=1&amp;origin=http%3A%2F%2Fwww.onscreencounselling.com"></iframe>
        </div>
        <div id="content" class="site-content" role="main">
            <article id="post-576" class="post-576 page type-page status-publish hentry">
                <header class="entry-header">
                    <h1 class="entry-title">homepage</h1>
                </header><!-- .entry-header -->

                <div class="entry-content">
                    <p>&nbsp;</p>
                    <p>This is some content for the homepage</p>
                    <p>And a bit more to go with it</p>
                    <p>&nbsp;</p>
                    <p>&nbsp;</p>
                    <p>&nbsp;</p>
                    <p>&nbsp;</p>
                    <p>&nbsp;</p>
                </div><!-- .entry-content -->

                <footer class="entry-meta">
                </footer><!-- .entry-meta -->
            </article><!-- #post -->
            <div id="comments" class="comments-area">
            </div><!-- #comments -->            
        </div><!-- #content -->
    </div>

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

Preventing a webpage's CSS from affecting an iframe loading an HTML document

Whenever I load an iframe, it seems to change a bit. Do I need to apply some kind of reset or adjustment? How can I ensure that the content within the iframe looks consistent no matter what page it's loaded into? ...

javascripthtmlcssiframe

Implementing a design aesthetic to installed React components

After downloading a react multiselect component created by an individual, I installed it using npm install .... and incorporated the component in my react code with <MultiSelect .../>. The dropdown checkbox 'menu' is designed to allow users ...

javascriptcssreactjsreact-component

An elementary React project facing compilation issues

I'm currently exploring react hooks, but I encountered an error with the useReducer hook. The console displays the following error message: "Invalid hook call. Hooks can only be called inside of the body of a function component. This could happe ...

javascripthtmlnode.jsreactjsnpm

What is the best way to spin an element around its center?

I'm faced with a challenge where I have an element that needs to be rotated using JavaScript. The rotation is currently functional, but it's rotating around points other than its center. My goal is to rotate the element around its own center. ...

javascriptjqueryhtmlcss

The jQuery prop("disabled") function is not operating as expected

Although I've seen this question answered multiple times, none of the suggested solutions seem to be working for my specific example. Hopefully, a fresh set of eyes can help me figure out what's going wrong. Even after adding alerts to confirm t ...

javascriptjqueryhtmljquery-mobile

What could be causing the issue with importing this JS function into my blade.php file?

I am encountering an issue with my JavaScript file, 'submittedForms.js', which I reference in my blade.php as follows: <script type="module" src="/js/bundle/charts/submittedForms.js"></script> Within the 'submittedForms.js&apos ...

javascriptphphtmllaravelimport

Ensuring that the justify button's widths align correctly within a container that spans 100% of the

Is there a way to achieve this layout similar to the Button Groups in Bootstrap? Check out the example here This is my current markup: <div class='button-group'> <button>1</button> <button>2</button> <butt ...

htmlcss

Utilize Vue.js to iterate through JSON data and dynamically populate an HTML table

When the page loads, data in json format is retrieved from the database. My goal now is to utilize Vue.js to iterate through that json and create an html table. Javascript/Vue.js portion: callStocks = function () { var app = new Vue({ ...

javascripthtmlvue.js

The advice I received was to avoid using max-width and instead utilize min-width when styling with CSS

With @media screen and (max-width:700px) { Link to image 1 Whenever I use @media screen and (min-width: 700px) { it messes up. How can I adjust it for min-width without causing issues? Link to image 2 ...

css

Unusual body padding found in the mobile design

When visiting on a mobile device and inspecting the elements in Google Chrome, try disabling the style rule overflow-x: hidden from the body element and then resizing the window. You may notice a white vertical stripe (padding) appearing on the right side ...

javascripthtmlcss

:active pseudo-class malfunctioning on button element

edit: I have discovered that the :active pseudo-class is not working properly in Chrome, but it does work in Edge. As a beginner in coding, I am trying to figure out why this issue exists. I am currently attempting to replicate the google homepage and str ...

htmlcsspseudo-class

Place elements in a grid layout using CSS (and also ensure they are centered)

My goal is to create a data-grid (table layout) where the elements have fixed sizes. These elements should be placed in the same line until they can't fit anymore, then move to the next line. I have tried using inline-blocks for this, but I'm st ...

htmlcss

Tips for integrating Less and Bootstrap in an Angular 6 project

After making changes to angular.json to use less as the styleext, I tested it by creating a component. However, now I want to incorporate Bootstrap classes into my component's css/less. I specifically want all buttons in my component to have the .mx-1 ...

cssangularbootstrap-4less

Encountering a Django Channels issue while loading the JavaScript wrapper

After successfully running the server, the following appeared in my cmd prompt: System check identified no issues (0 silenced). January 21, 2020 - 17:43:42 Django version 3.0.2, using settings 'crm.settings' Starting ASGI/Channels version 2.4.0 ...

javascripthtmldjangodjango-channels

Having trouble with custom popup message rendering but the button is unresponsive?

I am currently experiencing an issue with a custom popup that is supposed to display upon form submission. The popup shows up, but there seems to be a problem with the close button functionality. Even though you can click on the X button, it does not close ...

javascriptpythonjqueryhtmlcss

Instead of accessing the HTML page directly, you can view the source page by using the F12

I need to extract both data and IPs from VirusTotal.com using selenium and Beautiful Soup in Python. When I make a get request, I only receive the view-source HTML instead of the complete data-rich HTML shown in Inspect mode (F12). Does anyone have any su ...

pythonhtmlseleniumbeautifulsoup

Exploring the inner workings of AngularJS SEO in HTML5 mode: Seeking a deeper understanding of this hidden functionality

There are plenty of resources available for incorporating SEO-friendly AngularJS applications, but despite going through them multiple times, I still have some confusion, especially regarding the difference between hashbang and HTML5 mode: In hashbang (# ...

javascripthtmlangularjsseoweb-crawler

Flexbox problem - uneven heights

I have set up a flex box layout and you can view the codepen link here:- https://codepen.io/scottYg55/pen/zYYWbJG. My goal is to make the pink backgrounds in this flexbox 50% of the height, along with the background image so it resembles more of a grid sy ...

jqueryhtmlcss

Using the <mark> tag in CSS for creating padding

Struggling to utilize the padding feature in CSS effectively with the HTML below, as it only pads the first word on the left side: The current CSS code I have that's not working correctly: mark { background-color: #89ce40; color: white; opac ...

htmlcss

Prevent text from wrapping when using jQuery to animate font size

I have a unique way of showcasing content in a preview format by utilizing em units for scaling and adjusting the root font size to increase or decrease. When users click on the preview, the full content is revealed with an animation that scales the font s ...

javascriptjqueryhtmlcss