Guidelines for using a video as a background on half of the page

Is it possible to have a video background take up half of the screen on a homepage?

Currently, I am using Bootstrap 4's grid system to divide the page and using html5 to implement the video.

<div class="container-fluid">
    <div class="row">
        <div id="leftcontainer" class="col-md-6">
            <div id="video">
                <video class"video-fluid z-depth-1" autoplay loop muted width="100%">
                    <source src="videos/backgroundVid2.mp4" type="video/mp4" />
                </video> 
                <button>Download Brochure</button>
                <button>Contact Us</button>
            </div>
        </div>
    </div>
</div>

After running the code, I noticed that the video does not fit properly in the container and is not responsive to changes in screen size.

htmlcssbootstrap-4

Answer №1

It seems like you're looking for help with responsiveness using a YouTube video. Here's a working example in a fiddle:

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

<div class="container-fluid px-0">
    <div class="row">
        <div class="col-md-6">
            <iframe width="100%" height="100%" src="https://www.youtube.com/embed/HTEX0qaSY3U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            <button>Download Brochure</button>
            <button>Contact Us</button>
        </div>
    </div>
</div>

If this isn't what you needed, please provide more details in your question.

You could try replacing the iframe tag with the video tag to achieve a similar effect, but I haven't tested it personally.

Answer №2

Maybe you could try approaching it like this...

If you include CSS and Javascript, we can offer more assistance...

Source : W3schools

// Access the video element
var video = document.getElementById("myVideo");

// Access the button element
var btn = document.getElementById("myBtn");

// Function to pause/play the video and change the button text
function myFunction() {
  if (video.paused) {
    video.play();
    btn.innerHTML = "Pause";
  } else {
    video.pause();
    btn.innerHTML = "Play";
  }
}
/* Style the video: Full width and height to cover the entire window */

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}


/* Add content at the bottom of the video/page */

.content {
  position: fixed;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}


/* Style the button used to pause/play the video */

#myBtn {
  width: 200px;
  font-size: 18px;
  padding: 10px;
  border: none;
  background: #000;
  color: #fff;
  cursor: pointer;
}

#myBtn:hover {
  background: #ddd;
  color: black;
}
<!-- The video -->
<video autoplay muted loop id="myVideo">
  <source src="https://ak8.picdn.net/shutterstock/videos/16923118/preview/stock-footage-rain-and-light-on-window-of-moving-vehicle-modern-travel-concept.webm" type="video/mp4">
</video>

<!-- Optional: text overlay for the video -->
<div class="content">
  <h1>Heading</h1>
  <p>Lorem ipsum...</p>
  <!-- Use button to pause/play video with JavaScript -->
  <button id="myBtn" onclick="myFunction()">Pause</button>
</div>

Here's hoping this solution proves useful...

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 specific use of the second app.css file in Laravel?

I'm currently delving into Laravel 8, and I'm perplexed by the role of Resources\css\app.css. While every other component in the Resources directory serves a clear function, the app.css file appears to be empty. Even when I attempt to a ...

phpcsslaravelnpmnpm-run

Having trouble importing Bootstrap CSS into a TypeScript file

I'm having trouble importing the bootstrap css file from node_modules. It's not importing, even though I can import the scss file successfully. The following import is not working: import bs from "bootstrap/dist/css/bootstrap.css"; Ho ...

typescriptbootstrap-4import

Generating a user interface (UI) by utilizing an EDMX file

What exactly is an EDMX file and what function does it serve? Is it possible to generate a UI screen using an EDMX file? If so, what are the steps involved in doing so? Thank you for your help ...

javascripthtmlentity-frameworkodataedmx

The redirection to the webpage is not occurring as expected

I've been attempting to redirect another webpage from the homepage in my node server. However, the redirect isn't working as intended to link to idea.html, where the relevant HTML file is located. Can anyone assist me in identifying any errors in ...

javascripthtmlcssnode.jsreactjs

What are the steps for rearranging a table column?

I am trying to show a text file in a table and allocate some code to each entry. I can display the text file. I can assign the code for each record (though this part is still under development). However, I have encountered an issue. The columns of the t ...

phphtmlcsshtml-table

Adjusting the view to focus solely on the visible portion of the webpage

Is there a way to achieve zooming in and out on a website similar to how it works on the site ? I want only the visible area to zoom in or out when users interact with their browser. I searched online for a solution but couldn't find one. Any suggesti ...

javascriptjqueryhtmlcss

Inconsistencies with Handlebars adding forward slashes "/" to page addresses are causing confusion among users

In my project, I have 10 unique .handlebars files that are being called using express GET methods as shown below: app.get('/pagename1', function(req, res, next) { res.render('page1'); }); app.get('/pagename2', function(req ...

htmlnode.jsexpresshandlebars.js

Try implementing toggleClass() in the accordion feature rather than addClass() and removeClass()

Hey there! I've implemented accordion functionality using the addClass() and removeClass() methods. Here's a breakdown of what I did: <div class="container"> <div class="functionality">Accordion</div> <ul class="acco ...

javascriptjquerycss

What distinguishes the built-in Head component in Next.js from using the head tag directly in JSX?

Hey everyone, I am hoping this question fits well within this community. I've been confused about how the built-in Head component in Next.js actually works. My assumption is that Next.js automatically generates metadata and then Head either replaces o ...

htmlreactjsnext.js

Bootstrap dropdown menu fails to expand

I recently attempted to implement a hamburger menu using Bootstrap on my website. After checking and adding the necessary CSS and JS files, I encountered an issue where the menu wasn't expanding as expected. I followed the example code provided on the ...

cssbootstrap-5

Tips on restricting dates to be equal to or earlier:

I have written a code to determine if two given dates are equal or not. The code should allow for the current date to be smaller than or equal to the provided date, but it should not allow for it to be greater. var date = '10-11-2015'; var toda ...

javascriptphpjqueryhtmldate

When it comes to designing responsive websites, the use of `@

Being new to CSS, I am open to criticism and feedback. @media (max-width: 735px) {... } @media (min-width: 735px) {... } @media (width: 320px) {... } @media (width: 360px) {... } @media (width: 375px) {... } @media (width: 414px) {... } I have tried us ...

cssmedia-queries

Interacting with the column tags within HTML tables through the .NET WebControls Table in a programmatic way

As per the information provided on this website: The HTML5 table contains col tags... <table width="100%"> <col style="width:40%"> <col style="width:30%"> <col style="width:30%"> <tbody> ...

css.netasp.net-mvchtml

iOS is not receiving JSON data in the response headers

I am currently utilizing the CocoaHTTPServer for establishing my server connection. However, I encountered an issue with retrieving JSON data in the header file of my HTML page (web client). Here is the code snippet : HTML Page : endAPSession: funct ...

javascriptjqueryhtmliosjson

As I scroll, I wish for the search bar to remain fixed at the top of the

Help needed! I'm currently working on a website for a client, and they want the search bar to stay fixed as users scroll down. I've been struggling with this task and can't seem to get it right. Any assistance would be greatly appreciated. T ...

htmlsearchbar

Modifying the HTML file won't be immediately visible in browsers

I encountered a frustrating issue while working on my website. Despite making changes to the code, the browsers are not reflecting the updates. This problem is occurring in Internet Explorer, Google Chrome, and Firefox. Initially, I had a div with a link ...

htmlcssinternet-explorergoogle-chromefirefox

What is the most effective way to combine cells within an HTML table?

I am struggling with merging cells in the first row of a table. I would really appreciate some guidance on how to resolve this issue. Thank you. Here is the code snippet: <!DOCTYPE html> <html> <head> <style> </style> < ...

htmlhtml-table

When the React component's state is updated, an animation is triggered in a subcomponent connected to the parent component

The ProjectsSection component is responsible for rendering a document section with a header and cards. The goal is to trigger a header animation only when the header becomes visible on the screen for the first time and have it run once. However, adding a s ...

cssreactjs

A comprehensive guide on creating a package that combines an href link with an <li> element

I am currently using the <li> tag to display href links. The issue I am facing is that when I click on the 'box,' it does not directly link to another page. Instead, I have to click on the href link for it to redirect to another page. Is th ...

javascripthtmlcss

Do Not Replace Bootstrap Theming

Good day, I am encountering an issue that has left me puzzled. I am attempting to modify the color scheme of bootstrap using SCSS in my Vue project, but it seems to be ineffective when I execute npm run serve. Below are snippets from my files: custom_boo ...

vue.jsbootstrap-4