Place the div with the video on top of Bootstrap 3

Trying to position a video ads div on top of an image within a Bootstrap 3 container. The challenge is making sure the video stays responsive and resizes along with the image across different screen resolutions. Attempted to place the video within the Bootstrap container but encountered issues with proper alignment.

Check out the Codepen example: https://codepen.io/anon/pen/byGYqV

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div id="container">
    <video id='video' controls="controls" preload='none' poster="http://media.w3.org/2010/05/sintel/poster.png">
        <source id='mp4' src="http://media.w3.org/2010/05/sintel/trailer.mp4" type='video/mp4'>
        <source id='webm' src="http://media.w3.org/2010/05/sintel/trailer.webm" type='video/webm'>
        <source id='ogv' src="http://media.w3.org/2010/05/sintel/trailer.ogv" type='video/ogg'>
    </video>
</div> <!-- End Normal Container -->

<div class="container-fluid">
    <div class="row main-player">
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
            <img alt="" src="https://mitofago.com.mx/sites/default/files/styles/660x320/public/0029399560.jpg" class="img-slider img-responsive">
        </div>
    </div>
</div> <!-- End Boostrap Container -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Appreciate any help with this issue!

htmlcsstwitter-bootstrap-3

Answer №1

To customize the size of your video tag, add the following CSS code and adjust the values for width and max-height:

video {
    width: 68rem;
    max-height: 50%;
    max-width: 100%;
}

You can view the updated code on Codepen here: https://codepen.io/anon/pen/PvoEjm

Answer №2

To ensure that both the video and image were responsive, I made some adjustments to the HTML structure. You can view the updated Codepen link here. Additionally, a small media query was added for better functionality. Check out the updated codepen link

The image is set in an absolute position on top of the video.

.img-container {
 position: absolute;
  top: 60px;
  left: 60px;
}

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

Getting the full referrer URL can be achieved by using various methods depending

I am currently working with ASP.Net. My goal is to retrieve the complete referrer URL when visitors arrive at my website from: https://www.google.co.il/webhp?sourceid=chrome-instant&rlz=1C1CHEU_iwIL457IL457&ion=1&espv=2&ie=UTF-8#q=%D7%90 ...

javascriptjquerycssasp.nethtml

Ensuring a row of bootstrap cards is consistent with the height of the tallest card

Currently, I am working on a small personal project to test my skills in Django and Bootstrap. My challenge lies in displaying a list of quizzes in individual cards using a for loop, where the height of each card varies due to the length of the quiz descri ...

pythonhtmlcssdjangobootstrap-4

The sub menu in IE 8 does not stay open while hovering over it

My website has a navigation menu with a sub-menu that appears when hovering over the parent element. While this works smoothly on modern browsers, Internet Explorer 8 presents an issue. When hovering over the parent li element in IE 8, the sub-menu is disp ...

cssdrop-down-menuinternet-explorer-8submenu

What could be causing my difficulty in locating an HTML element using jQuery/JS string interpolation?

In my project, I have a set of div blocks each identified by a unique numerical id. For instance: https://i.sstatic.net/lYod8.png One of the tasks in my project is to select the 29th element following a specific chosen element. For example, if I choose t ...

javascriptjqueryhtmlcss

Switch out HTML tags depending on attribute content

In my current project, I am looking to replace all instances of the vanilla <a> tag with a different tag (<router-link>). The challenge lies in applying certain conditions based on the value of the href attribute (for example, it should ignore ...

htmlvue.jswebstormstructural-search

Floating images using clearfix technique

I'm having trouble explaining the issue, so please check out the link. On this (A), the white background looks great, but when I add <!-- Problem here --> <ul class="thumb2"><li> <a href="/malaysia/ceiling-lights/8044-f610-255" ...

css

What is the method for altering the color of the left border on a tab menu?

Check out my website at Hover over the 'URUNLER' section on my website to see the tabbed menus. I'm trying to figure out how to change the red color that appears when a tab is active to blue, but haven't been successful so far. ...

jqueryhtmlcsstwitter-bootstrapdrop-down-menu

Can a website be designed to mimic the style of the current operating system?

Is there a way to apply CSS styling to web site elements, such as buttons, that mimics the appearance of operating system (Windows, macOS, Linux) button styles? This would allow HTML buttons to automatically adjust their CSS style whenever I switch theme ...

htmlcss

Adaptable Bootstrap navigation bar

In the process of creating a responsive menu, I have designed a navbar for desktop that includes 3 text links and 3 small pictures that are also links. However, when transitioning to a smaller screen size, my goal is to keep the 3 small pictures as they a ...

htmlcsstwitter-bootstrapresponsive-design

I'm encountering difficulties implementing anchor tags within my single-page application

Currently, I am in the process of learning how to create single page applications with AngularJS using the ui-router module. However, I have encountered an issue where the anchor tag on my main HTML page is not functioning correctly. I am now at a standsti ...

htmlangularjsangular-ui-router

Using JQuery to dynamically change className based on specific logic conditions

I am struggling to dynamically change the class name of a div based on the text inside another div using jQuery. Here is an example of the HTML structure: <div class="div-overlay"> <a class="image" href="https://www.e ...

javascripthtmljqueryvariables

Angular Material failing to adapt to mobile devices

My website was created using Angular Material and looks great on desktop, but is completely broken and out of place when viewed on mobile devices. I'm thinking it might be because I haven't set the column size for each element properly. Any advic ...

htmlangularjsmobileresponsive-designangular-material

jQuery does not support iterating over JavaScript objects

Here is the code snippet I am working with: $(obj).each(function(i, prop) { tr.append('<td>'+ i +'</td>' + '<td>'+ prop +'</td>'); }); Intriguingly, the data in $(obj) appears as: Obje ...

javascriptjqueryhtml

When using IE10 and Opera 12, setting the opacity to less than 1 and display to inline may result in an unusual cropping effect

For this inquiry, with the approval of the staff and community, I would like to address two separate bugs that occur in different browsers under similar conditions. The bugs manifest when an element with display:inline (and a box-shadow, although this is ...

cssinternet-exploreropera

What are some effective ways to display input text alongside input radio buttons?

Hello, I am trying to display an input with a radio button, but for some reason it is not working correctly. When I click on 'No' it shows the correct input, but when I click on 'Yes' nothing appears. I'm unsure why this is happeni ...

javascripthtmlruby-on-railsinput

When editing a user, do not make any changes to the input checkbox

Whenever I try to edit my user from inactive to active, it works perfectly fine. But when I attempt to edit my users from inactive to active, it doesn't seem to work. Here is the PHP code snippet in question: https://pastebin.com/iBaDxH2u <input ...

phphtml

Troubleshooting problem with Bootstrap navbar-form width specifically in Chrome browser

My current project involves using Bootstrap 3.0.0. While implementing the Default Navbar example with some custom CSS, I ran into an issue where the search form text box was extending to full width on Chrome. This caused my navbar to break into three line ...

htmlcssgoogle-chrometwitter-bootstraptwitter-bootstrap-3

Display the chosen rows from an HTML table

I currently have a table set up like the one shown in this example. I am now looking to add a feature that allows users to print only selected rows. These rows should be selectable by clicking on checkboxes located on the right side of each row. If anyone ...

javascripthtmlprinting

Avoid displaying images that have not completely loaded

My website has a feature that displays user data, including various types of images such as Personal and Learning. To showcase these images, I have implemented a Modal with an img tag. One issue I have encountered is that there is only one Modal and one ...

javascripthtmljqueryimagemodal-dialog

How to eliminate excess white space on the right side in Bootstrap 4

Could someone please clarify why I am experiencing a white space on the right side when using Bootstrap 4? This is the primary code block for the page. <main id="intro" role="intro" class="inner text-center"> <h2>Lorem Ipsum</h2> ...

javascriptcssbootstrap-4removing-whitespace