Creating videos for banners

Question

Creating videos for banners

So I have a website at this URL:

My goal is to achieve the following:

I want the video to play in the banner and adjust the Iframe size based on the user's device resolution
I want the video to autoplay
I want the logo, text, & button to be displayed in front of the video (currently not working as expected)

Unfortunately, I don't have much knowledge of HTML5 and this is the best I could come up with.

Below is the code snippet that I have implemented so far, but I suspect there are many mistakes in it:

<div id="banner">
  <iframe width="600" height="1000" src="https://www.youtube.com/embed/BkEQZc1RH5M?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
<div class="container">
<div class="title">
            <h2>Welcome to Umbrella Corperation</h2>
              <span class="byline">Come join our Wonderful Community</span></div>
            <ul class="actions">
              <img src="images/apilogo3.png" width="300" height="300" alt=""/>
              <li><a href="http://umbrellacorperation.com/forum/" class="button">Click here for Forum Access</a></li>
          </ul>
        </div>
    </div>

I would greatly appreciate any assistance in making this work as intended!

css html

Answer 1

Answer №1

Check out this sample code for embedding a video player:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Custom Video Player</title>
<style>
    body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
    }
    header {
            text-align: center;
            background-color: #333;
            color: #fff;
            padding: 10px;
    }
    #player {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 60vh;
    }
    #player > div {
            max-width: 80%;
    }
</style>
</head>
<body>
<header>
    <h1>Custom Video Player</h1>
</header>
<section id="player">
    <div>
        <video src="yourvideo.mp4"
            controls
            width="800" height="450">
            Your browser does not support the video element. Please <a href="yourvideo.mp4">download the video</a> instead.
            </video>
        </div>
</section>
</body>
</html>

Feel free to customize the CSS to fit your requirements.

Answer 2

Check out this sample code for embedding a video player:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Custom Video Player</title>
<style>
    body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
    }
    header {
            text-align: center;
            background-color: #333;
            color: #fff;
            padding: 10px;
    }
    #player {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 60vh;
    }
    #player > div {
            max-width: 80%;
    }
</style>
</head>
<body>
<header>
    <h1>Custom Video Player</h1>
</header>
<section id="player">
    <div>
        <video src="yourvideo.mp4"
            controls
            width="800" height="450">
            Your browser does not support the video element. Please <a href="yourvideo.mp4">download the video</a> instead.
            </video>
        </div>
</section>
</body>
</html>

Feel free to customize the CSS to fit your requirements.

Creating videos for banners

Answer №1

Similar questions

Adding a uniform header and footer across all pages simultaneously in HTML

What is the reason for the inconsistency in CORS post requests working for one scenario but not the other?

Why are my video files exhibiting inconsistent behavior?

Send a parameter to be used as a link attribute in a pop-up box

Enhance the CSS styling for the React-Calendly integration in a React project

Managing custom Bootstrap 4 styles and assets within Yii2 framework

Is it possible to assign the margin-bottom property of one element to be equal to the dynamic height of a sibling element?

Is it possible to activate a hover effect on an image within a button only when the button itself is being

What is the best way to apply a class to the grandparent div of an element in AngularJS?

"Efficiently handle online submissions: Use Django to submit a form and instantly display the outcome

Customize the fieldset style in Bootstrap 5

Angular and Bootstrap project with an advanced dropdown menu featuring multiple levels

When I try to hover my mouse over the element for the first time, the style.cursor of 'hand' is not functioning as expected

I cannot seem to alter the background color of my image through the use of external CSS

Struggling to align my Navbar items in one clean line, they seem to pile up and remain fixed on the left side. Utilizing ReactJS and MUi5

Display a video modal upon page load, allowing users the option to click a button to reopen the modal

How to Transfer Data from a Dynamic Drop-down Menu to PHP for Processing and Presentation in a Div Element on the Same Web Page

Looking to Move the Image Up?

jQuery script for reversing the collapse/expand feature

Having issues with the Bootstrap tabs code provided in the documentation not functioning correctly