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:
Framework: ASP .NetCore MVC web application
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,
Using video tag in _layout.cshtml file as follows.
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.
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.
In _layout.cshtml you can find the following code snippet:
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
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>
In the 'body' tag, add the bootstrap classes 'jumbotron' and 'jumbotron-fluid' as follows.
<body class="jumbotron-fluid jumbotron">
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">
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>
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.
Create an Azure account for free. (you can use your university mail/GitHub student package or just use the credit card number)
Search for 'Azure blob storage' and create a 'container' with public access enabled. (This can be done when creating the container)
screenshot
Next upload the video file to blob storage and get the URL. screenshot
Now you can use that URL directly in the project.
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.
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>
}
Related
I've got an htmx-indicator in my project that I use to display when reloading a portion of the page. However, I am noticing that the loading indicator renders during the initial page render, and then fades out:
Shouldn't the htmx-indicator's start out hidden? What do I need to add to them to make sure it starts hidden, and only gets displayed on my htmx load?
Here is the snippet of html (the project uses django and bootstrap) (I've got many of the styles just hard coded in the html while I'm tweaking):
<div class="spinner-wrapper position-absolute htmx-indicator" style="top:0; left:0; width:100%; height:100%; z-index: 1000; pointer-events:none;">
<div class="d-flex justify-content-center align-items-center position-relative" style="height:100%;">
<div class="spinner-border text-info" style="width: 4rem; height: 4rem;" role="status">
</div>
</div>
</div>
I have not made adjustments to the default htmx CSS styles.
On slow connections and/or with weak(er) CPUs it takes some time to load and parse/evaluate the CSS/JS files. In this case the spinner is created with Boostrap CSS, but the class definition that hides the .htmx-indicator class elements is injected later with HTMX, so until that the spinner will be visible. To solve this issue we can manually add the class definition of htmx-indicator before Bootstrap CSS stuff, so when the spinner starts its div will be already invisible:
<head>
<style>
.htmx-indicator {
opacity: 0;
transition: opacity 200ms ease-in;
}
</style>
<!-- Bootstrap -->
<!-- HTMX -->
</head>
I am creating qweb report and I want to add a image to the background in all pages but I am getting watermark in only the first page. What I have tried:
<div style="position:absolute;text-align:center;z-index:-1;border:0;opacity:0.1;padding-top:50px;">
<img t-att-src="'data:image/png;base64,%s' %o.employee_id.company_id.watermark_img"/>
</div>
I have found the solution here
Add this code for watermark in header of external layout. Its external id is report.external_layout_header:
<style>
.watermark {
position: absolute;
opacity: 0.25;
z-index: 1000;
transform: rotate(300deg);
-webkit-transform: rotate(300deg);
width: 150%;
}
</style>
<div class="watermark">
<p>WATERMARK</p>
<img t-att-src="'/module_name/static/src/img/image_name.png'" />
</div>
I have added a image stored as a file. If you are going to use a static image I think this is the most appropiate way
Note: I am afraid this does not work in Odoo v11
Update
This solution only is valid if you want to add the same image to all the reports.
There is a module developed by the OCA to add watermarks to the reports. A field appears in all reports where an images (with A4 size) can be added. The module name is report_qweb_pdf_watermark
Please try this code:
<div
style="position:absolute;opacity:0.25;z-index:1000;transform:rotate(300deg);-webkit-transform:rotate(300deg);width:150%;">
<p style="font-size:50px;">WATERMARK TEXT</p>
</div>
Have a look at both images and you see that with durandal the layout does not work correctly.
I am using the Microsoft CSS grid layout for Internet Explorer 10+
I have upload a sample project here with Visual studio 2012:
http://speedy.sh/2QDQY/TLP2014.7z
In this project just go to Views\Home\Index file and outcomment the top 2 lines disabling durandaljs then the layout is fine.
Or enable these top 2 lines (outcomment the other html code in the index file) and the shell.html file is used then the layout is broken.
Is this my error or what do I wrong?
Without Durandal
With Durandal
When I put a wrapper div around the header,content,footer and set it to height:100%; then its also ok with durandal. :)
#siteWrapper {
height:100%;
display: -ms-grid;
-ms-grid-columns: 1fr;
-ms-grid-rows: 60px 1fr 60px; // header content footer
}
Was too late yesterday... the fix is also to make 100% height for the div with the applicationHost id! This is the root of... durandal ;-)
The problem may be MS grid layout interfering with Twitter Bootstrap. Have you tried commenting out the CSS includes for Bootstrap?
I solved this problem by adding a fx_height.css to my site:
/*durandal fixes*/
#applicationHost, #applicationHost > div, #applicationHost > div > div
{
height: 100%;
}
My shell looks like this:
<div id="shell">
<!-- ko compose: {view: 'nav'} --><!--/ko-->
<div id="wrap">
<!-- ko compose: {
model: router.activeItem,
afterCompose: router.afterCompose,
transition: 'entrance'} -->
<!--/ko-->
</div>
<!-- ko compose: {view: 'footer'} --><!--/ko-->
</div>
I am using Bootstrap 3 Sticky footer structure and its sticky-footer.css presentation.
first timer here. I help manage a WordPress site that has an html object imbedded in a div that overflows. The scrollbar functionality works fine on pc's; however, on an ipad (and I assume an iphone and android devices), the scrollbar doesn't appear. The html I have is:
#wrapper {
width:100%;
height:360px;
overflow:scroll;
-webkit-overflow-scrolling:touch;
}
#wrapper object {
width: 100%;
height: 100%;
}
<div id="wrapper">
<object id="object" type="text/html" data="[link to html page with lots of <tr> rows]"
</object>
</div>
I'm wondering if perhaps the webkit overflow attribute should be on the object instead of the div to get this to work correctly?
Currently I'm embedding Youtube videos with the following HAML code in a Twitter Bootstrap based site:
.row
.span12
%iframe.span11{ :height => "720", :frameborder => "0", :allowfullscreen => nil, :src => v.video_url }
Unfortunately, this doesn't respond well when resizing the browser or on mobile devices because of the static height.
What would be a better (more dynamic and responsive) way to implement this embedded iframe for Youtube?
Try this "Responsive video CSS", it works perfect for me: https://gist.github.com/2302238
<section class="row">
<div class="span6">
<div class="flex-video widescreen"><iframe src="https://www.youtube-nocookie.com/embed/..." frameborder="0" allowfullscreen=""></iframe></div>
</div>
<div class="span6">
...
</div>
</section>
I implemented a pure CSS solution which works great.
Here is an example of code in my view using the iframe code generated in YouTube.
<div class="video-container">
<iframe width="300" height="168" src="http://www.youtube.com/embed/MY__5O1i2a0" frameborder="0" allowfullscreen></iframe>
</div>
Here is an example of code in another view where instead of using iframe I used the body field generated from the AutoHtml gem, which is used for embedding different types of video links into a web page. This is good if you have a model where a link needs to be dynamically embedded into the same web page.
<div class="video-container">
<span style="text-align: center;"><%= #livevideo.body_html %></span>
</div>
Here is the CSS code:
.video-container {
position: relative; /* keeps the aspect ratio */
padding-bottom: 56.25%; /* fine tunes the video positioning */
padding-top: 60px; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
Here is the YouTube video which explains in great detail how the code works and give one or two blog posts to check out.
http://www.youtube.com/watch?v=PL_R3zEjqEc
Bootstrap 3.2.0 comes with a several improvements and a large number of bug fixes. A framework for building websites with a responsive design, Bootstrap was missing support for responsive , and elements, feature added in this latest version.
The HTML for a responsive YouTube 16:9 video that adjusts its size based on the width of the page it is displayed in looks like this:
On your container(maybe DIV) add class="embed-responsive embed-responsive-16by9"
This is probably best done with jQuery: http://www.seanmccambridge.com/tubular/ or http://okfoc.us/okvideo/
Just to automatize #Bart's answer, I've created a simple Javascript snipped that automatically wraps iframe elements within <div class="flex-video">
$(document).ready(function() {
$('iframe').each(function() {
$(this).wrap('<div class="flex-video"></div>');
});
});
If using bootstrap, the method below is without a doubt the easiest way to implement a responsive embed:
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
Documentation can be found here: http://getbootstrap.com/components/#responsive-embed.