When the play button is clicked, the video slides over to the left

Whenever I attempt to click on the video link, it seems to shift over to the left side of the page. The link is positioned in the center and I would prefer for the video to open up at the same central location. However, it consistently opens up on the left side of the page. This problem arises due to the utilization of the Sublime HTML5 video player.

Here's the html code snippet:

<div id="demo">
<table>
 <tr>   
<td><a href='#' id='start_video1' class='custom_start_view'><h3>Watch Demo</h3> </td>
<td><img src="assets/images/logo.png" width="50" height="50"/> </td>
</tr>
</a>
<video  id='video1' data-autoplay='true' poster='assets/images/logo.png' width='432' height='243' preload='none' style='display:none;'>
  <source src='assets/DreamItReelExplainerVideo.mp4' />
  <source src='assets/DreamItReelExplainerVideo.webm' data-quality='hd' />
  </video>
</table>
</div>

Additionally, here is the JavaScript code:

jquerycss

Answer №1

Could you please share your CSS code with us?

It seems likely that there are different floats on the two elements, or maybe differing margins.

Is JavaScript being used to hide the image?

Double-check to ensure that your float and margin settings match up between the cover image and video. Hopefully this suggestion proves useful!

(At the moment, only HTML has been provided, but there is a suggestion of JS towards the end of your post - consider sharing the CSS and any relevant JS impacting the video or cover image)

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

Smoothly scroll through divs using JQuery

Let me share an issue I'm facing. I have implemented smoothDivScrolling on my webpage. The problem is that the scrollable area containing all the items to be scrolled always ends up being larger than the actual content. When I reach the last item i ...

jquerycsshtml

Issue with custom font display malfunction

I'm having difficulty getting my custom @font-face to function properly. When I apply this class style to a <p>, it always defaults to Arial. Can anyone point out what might be going wrong here? <style> .stonefont @font-face { font-fa ...

htmlcssfont-face

Change the display of the lightbox when clicked. Utilize Angular and JQuery for this functionality

Here is the code for a lightbox: <div id="light-box"> <div id="first"> ..... </div> //initially visible <div id="second"> ..... </div> //hidden - but displayed when button is clicked. </div> I want to add two button ...

javascriptjqueryangularjs

Sending a JSON Object to an API endpoint using the $.ajax method

While attempting to extract data from a form by clicking a button and sending it to a web method in my code behind, I am aiming to pass it as a JSON object, following what seems to be the convention. Below is the current code snippet that I have, but unfor ...

javascriptjqueryajaxjson

Tips on converting a curl command to Jquery Ajax in the correct way

I'm trying to convert the following CURL Command to Jquery ajax, but I keep getting an error saying Cannot get data In the browser console, it displays the error 401 Unauthorized I've attempted to use a solution from this Source to no avail. cu ...

jqueryajaxcurl

"Owlcarousel Slider: A beautiful way to showcase

Currently, I am working on a project that involves implementing a slider. Since I lack expertise in JavaScript, I opted to use a plugin called owlcarousel. The challenge I'm encountering relates to the sizing of the container for the items. I'm ...

javascriptjqueryhtmlcssowl-carousel

An error message pops up when using Next.js with Sass, indicating that a suitable loader is required to handle this file type

I've been struggling to properly wire up my next.js project with SCSS, but no matter what I try, it just won't work. I double-checked my setup for compiling SCSS files, but the error message keeps popping up: /scss/style.scss 1:0 Module parse f ...

javascriptcsssassnext.js

"In the shadows, the .toLowerCase() method of undefined is failing without making a sound, yet the code

It seems that letting things fail in the background is necessary for this example to work consistently. Is there a way to work around this issue? There are instances where I need to check a div with a data-attribute on certain pages and add a class if it ...

javascriptjqueryhtml

Having trouble with jQuery not loading? Learn how jquery-rails operates

Currently, I am diving into the world of jquery and ajax by watching railscasts episode 136 revise jquery & ajax. Despite putting in over 4 hours of effort, I am still unable to get past the initial hurdle. The issue seems to revolve around adding remote: ...

jqueryruby-on-railsajax

Adjusting background size using jQuery as the window is resized

Exploring ways to dynamically resize the background image of my website based on the current window dimensions using jQuery. At the moment, I have tried the following approach: $(window).resize(function() { $("body").css({"background ...

javascriptjqueryhtmlcssresize

What is the best way to customize the styles of a reusable component in Angular2?

I am working with a reusable component called "two-column-layout-wrapper" that has its styles defined in the main .css file. In another module, I need to use this component but customize the width of two classes. How can I override these styles? import ...

javascriptcssangular

How should Bootstrap containers, rows, and columns be properly configured?

As a beginner in Bootstrap, I am still trying to grasp the concepts. Understanding how rows, columns, and containers work is clear to me so far. However, I am struggling with the syntax for setting up the div elements. Should my code look something like t ...

htmlcsstwitter-bootstrap-3

How to efficiently store data using ajax and php techniques

I'm currently working on sending data via ajax for the user_question and language input fields. Can anyone help me with the correct way to include this element in the ajax JavaScript code so that I can save the table element value in my database? Tha ...

javascriptphpjqueryajax

The image has max-height within a max-height container inside a fixed-height container

Here's the scenario: Can an image's max-height property be made to respect the fixed height of an ancestor element that is not its direct parent? I am aware that max-height requires a fixed height for calculation, so this query is distinct from ...

cssheight

Variable revised is not accessible beyond the function

When making an ajax call, the value of received is supposed to be incremented by 1 on success. The issue arises when trying to check if received is less than 10 in order to prevent entering getMessage() unnecessarily. However, outside of the function, the ...

javascriptjqueryjson

Activate the display by utilizing the getElementsByClassName method

In my design, I'd like to have the "Don't have an account?" line trigger the display of the .registrybox class when clicked. However, the script I've written doesn't seem to be working as intended. The script is meant to hide the .login ...

javascripthtmlcss

Encountering issues with Django when attempting to save JSON data in models

I have been attempting to use this code to store my JSON data in my Mvouchar model. However, I keep encountering an error. I am able to retrieve the data through cmd, but when I try to save it in my model, I encounter the error. I believe I may be making a ...

pythonjqueryjsondjangodjango-models

Display 2 more rows every time the button is clicked

I really enjoy using Google Images, and I'm working on creating a search results page similar to theirs. With Bootstrap 3, my goal is to display only the first two rows of an image gallery initially. Below the gallery, there will be an "Additional Ima ...

jquerytwitter-bootstrap

jQuery Datatables have trouble accessing specific row information when the table is set to be responsive

Currently, I'm utilizing the jQuery DataTables plugin along with the responsive addon to dynamically display and hide columns based on the size of the browser window. One of the columns is labeled as Actions, which permits users to edit a record by c ...

javascriptjqueryhtmldatatables

Include jQuery, jQuery UI, and plugins seamlessly to avoid any version conflicts

My goal is to inject my custom code into a webpage using a bookmarklet. This code requires jQuery, jQuery UI, and additional plugins to be included on the page. I'm aware of the noConflict function, but I have concerns about potential conflicts if ot ...

javascriptjquerybookmarklet