CODEWITHSUNDEEP
asp.net-corebootstrap-4
Shizma Shaheez
Shizma Shaheez

Reputation: 31

How to set a Video Background in ASP .NetCore MVC Web Application

Currently, I am working on a ASP .NetCore project to make a web application. I face trouble in setting a video background for the entire application. There are plenty of methods to set a video background for ordinary Html/CSS projects but I was unable to find a reliable method to set up a video background for a ASP.net core MVC web application.

Project Details:

  1. Framework: ASP .NetCore MVC web application
  2. Target Framework: net 5.0

This is my project structure:The folder structure of the MVC web app

I was in a hurry to find a way to do this. I am sorry if the information provided by me are not sufficient. Yes, I have tried using simple available methods such as,

HTML code:

    <div class="fullscreen-bg">
      <video loop muted autoplay poster="images/background.jpg" class="fullscreen-bg__video">
                <source src="../../wwwroot/video/background.mp4" type="video/mp4">
      </video>
    </div>

CSS code:

.fullscreen-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}
        
.fullscreen-bg__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

The video file is saved in images folder of wwwroot folder. It is a mp4 file.

I have tried several codes similar to above code, but it does not work in ASP.NETcore web app.

Upvotes: 2

Views: 2097

Answers (2)

Pawara Siriwardhane
Pawara Siriwardhane

Reputation: 2055

I ran into a similar problem, once. This could be solved by few codes added to the _layout.cshtml. Following is the method I followed to solve the issue. I hope this might help you to solve your issue, too.

I made the following changes in the _layout.cshtml file.

  1. In _layout.cshtml you can find the following code snippet:

    <div class="container">
   <main role="main" class="pb-3">
      @RenderBody()
   </main>
</div>

  2. Modify it as follows:

      <div class="container embed-responsive">
     <main role="main">
        <div>
           <video autoplay muted loop poster="">
               <source src="" data-src="https://webtests.blob.core.windows.net/samplevideo/background.mp4" type="video/mp4">
           </video>
           <div class="container">
               @RenderBody()
           </div>
        </div>
     </main>
  </div>

  3. In the 'body' tag, add the bootstrap classes 'jumbotron' and 'jumbotron-fluid' as follows.

    <body class="jumbotron-fluid jumbotron">

  4. In the 'nav' tag, add the bootstrap class 'fixed-top' as follows (otherwise navbar is hidden under the layers and not clickable):

    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3 fixed-top">

  5. Now, after the </html> tag at the end, add the following script.

    <script>
    function backgroundVideo() {

       $("video source").each(function () {
          var sourceFile = $(this).attr("data-src");
          $(this).attr("src", sourceFile);
          var video = this.parentElement;
          video.load();
       });

    }
    window.onload = backgroundVideo;
</script>

  6. Next modify the bootstrap classes as follows. You may change the properties of the classes until the desired output is obtained.

    <style>
  .jumbotron {
     background-color: #454545;
   }

  .jumbotron .hero-section {
      position: fixed;
      z-index: 1;
      top: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.6;
      background: black;
   }

  .jumbotron .container {
      z-index: 2;
      position: relative;
   }  
</style>

If you may wonder how I get the 'data-src' URL for the video. It is very easy. Follow the steps below.

  1. Create an Azure account for free. (you can use your university mail/GitHub student package or just use the credit card number)
  2. Search for 'Azure blob storage' and create a 'container' with public access enabled. (This can be done when creating the container) screenshot
  3. Next upload the video file to blob storage and get the URL. screenshot
  4. Now you can use that URL directly in the project.
  5. You can further decrease the video file size using this online converter without affecting the quality: https://www.freeconvert.com/video-compressor

You can get the added benefit that your project size becomes less since the heavy media files are stored in the cloud. This solved my problem. I hope you may use it wisely. Please feel free to suggest more. I am also learning and highly value your opinion.

Upvotes: 2

Karney.
Karney.

Reputation: 5031

I think it is the path problem, wwwroot is a web root path when you run it. So the path need to be changed as:

<source src="~/video/background.mp4" type="video/mp4">

Edit:

It is possible that browser has compatibility issues with the transcoded video. You can also use videojs.

<div>
<video id="my-video" class="video-js" controls preload="auto" width="1296" height="728"
       poster="video/cover.png" data-setup="{}">

    <source src="~/images/1.mp4" type="video/mp4" />
    <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to a web browser that
        supports HTML5 video
    </p>
</video>
</div>
@section Scripts{
  <link href="//vjs.zencdn.net/7.10.2/video-js.min.css" rel="stylesheet">
  <script src="//vjs.zencdn.net/7.10.2/video.min.js"></script>
  @*If you'd like to support IE8*@
  @*<script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"> </script>*@
<script>
    var my_video = videojs('my-video');
    videojs('my-video').ready(function () {
        var myvideo = this;
        myvideo.play();
    });
</script>
}

Upvotes: 2

Related Questions