We are facing this problem.
I'll try to explain the most I can how we are working in this project first of all.
We have a demo page, and another one were we have each element of the demo page separately, called modules. This is because other clients can work more easily while building the "real" page.
Once said this, we have included a video in our demo page. In our modules, the video has a "fullscreen" button, but not in our demo.
We have to say that in our modules, we make a "fake" modal from bootsrap, just to show the clients how it should look the modal once opened. But once we include it into our demo page, this button literally doesn't shows up. We think it can be because the modal from bootstrap it's preventing to show it, but we are not sure. Here we leave some images from our modules and demo.
Modules:
Demo:
HTML:
<div class="modal-body">
<div class="ver-video">
<video controls >
<source src="video/video-finanzas.mp4" type="video/mp4">
<source src="video/video-finanzas.ogv" type="video/ogv">
<source src="video/video-finanzas.webm" type="video/webm">
Tu navegador no soporta el video
</video>
</div>
<div class="container-fluid wrapper-content">
<img src="img/icn-step2-incorrecto.png">
<h4>Text</h4>
<h5>More text</h5>
<p>More text</p>
Link
</div>
</div>
CSS:
.modal-onboarding .ver-video {
background-image: url("../img/Step2_Resposta.png");
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 220px;
position: relative;
}
.modal-onboarding .ver-video video{
width: 100%;
height: 100%;
}
As I said, we don't know why the button disappears. Maybe because bootstrap modal is preventing to showing it? If it's this, which is the solution? The code from one page to the other is the same one, copy-paste.
For what I can see, in Firefox and Chrome, a HTML5 video tag inside a frame tag, will make this button disappear. I just tested it with and without frames, and that's what exactly occurred.
Related
Firefox is causing a problem with a video media control where if the controls are enabled then you can't drag the media see this link an extract identifies the problem.
If the user agent exposes a user interface to the user by displaying controls over the media element, then the user agent should suppress any user interaction events while the user agent is interacting with this interface. (For example, if the user clicks on a video's playback control, mousedown events and so forth would not simultaneously be fired at elements on the page.)"
Despite trying various methods to get a workaround I can't seem to get it to work in Firefox. I can't turn off the controls as that gives the user no control but interestingly it will drag successfully while the "big-play-button" is overlayed, but of course once the video plays that button is hidden and the video does not respond to dragging. Chrome, Edge and Brave all work as expected.
The question is how do I add some form of overlay that can be used to drag the video in firefox.
Here is my code
`<div class="modal-boxes">
<div id="draggable" class="ui-widget-content" style="display:inline-block;">
<div id="resizable" >
<div id="video-container_1" >
<video id="myPlayer_1" controls disablePictureInPicture preload="auto" width="100%" height="100%" poster="myPoster " >
<source id="source_1" src="myVideo.mp4" type='video/mp4' >
Your browser does not support HTML5 video.
</video>
</div>
</div>
</div>
</div>`
Javascript code is:
`$( function() {
$( "#resizable" ).resizable();
});
$( function() {
$('#draggable').draggable()
});`
As I had not received any answers I kept digging and finally came up with a solution. This is presented just in case someone else has a similar need.
First create an overlay that has the following CSS class.
.dragOverlay {
width: 420px;
height: 225px;
position: absolute;
left: 0%;
right: 0%;
top: 0%;
bottom: 25%; /* So controls don't get masked */
margin: auto;
background-size: contain;
background-position: center;
}
Next insert the hyperlink tag within the videoContainer tag:
<a href="#" id="big-transparent-box_1" class="dragOverlay" ></a>
English isn't my first language, so forgive me if I have grammatical hicups or spelling mistakes, I'm still learning.
As the title says, my video background isn't working and I don't know where the issue lies exactly. I have already tried to apply some of the solutions I found on the internet but nothing works. If any of you could spare some time to look at my code I'd appreciate it.
OBS: I'm using VS Code and the video is saved in an internal folder within the project, as referenced in the CSS. The connection between CSS and HTML is correct, I tested it.
HTML:
<!--início da section-apresentação-->
<section class="section-apresentacao">
<div id="div-video">
<video autoplay muted loop id="meuVideo">
<source src="./videos/Marvel Studio.mp4" type="video/mp4">
</video>
</div>
</section>
<!--fim da section-apresentação-->
CSS:
#div-video {
height: 100%;
width: 100%;
}
#meuVideo {
min-width: 100%;
min-height: 100%;
}
Is there anyway i can get a video to show through part of an image?
I'm trying to create a website where people can create their own background scene for studying.
In my code below, image1 is an image of a wall with a window. I'd like the user to be able to click buttons to change the video in the background of the window (eg change from a rainy scene to snow etc).
I've only managed to get the video floating on top of the image, in a specif position aligning to the window, which only really works on full screen pc. preferably i'd have the video showing through part of the image, so it doesn't look like it's just floating on top of the window.
I'd also like it to work for different devices (mobiles, tablets etc), but this is something i'll probably look into later once i've got the basic design done.
Any help would be appreciated!
thanks
JS in head
<script language="javascript" type="text/javascript">
function changevid(buttonlink) {
document.getElementById('change').src = buttonlink;
}
</script>
style in head
<style>
#window_container {
background: url('pics/image1.jpg') no-repeat top left transparent;
width: 1920px; /* Adjust TV image width */
height: 1080px; /* Adjust TV image height */
position: relative
}
#window_container video {
position:absolute;
top:10px;
left:300px
}
</style>
HTML in body
<h1 style="color:blue";>
Build your own relaxing soundscape!
</h1>
<p style="color:blue";>Click the buttons below to create your ideal soundscape, perfect background for studying, or relaxing, whatever works for you</p>
<button onClick="changevid('videos/vid1_stream.mp4')">Video 1</button>
<button onClick="changevid('videos/vid2_rain.mp4')">Video 2</button>
<button onClick="changevid('videos/vid3_snow.mp4')">Video 3</button>
<div id="window_container">
<video controls autoplay id="change" height="600">
<source src="videos/vid1_stream.mp4" type="video/mp4"></source>
</video>
<div>
</body>
</html>
split it to <img> and <video> in the same div. the img should be a .png for transparency and you can style it something like this:
<div>
<video ...>
<img ...>
</div>
CSS
.img {
position: absolute;
top: 0;
z-index: 100;
}
I got a little trouble with video tag positioning. I need to put video element into image like foreground (picture in attachement). I used different css positioning tricks, but in this case nothing works fine. If I change video tag for some div element with different content, works good. I'm beginning to suspect tag video could be problem. I didn´t add css on purpose, I´m asking for you suggestions. Thanks
<div class="item active">
<img src="../public/images/xxx.png">
<div><video height=410px width:470px controls="controls">
<source src="https:xxxxxx" type="video/mp4" />
</video>
</div>
</div>
i think this can help you
img {
width: 100%;
height: 500px;
position: absolute;
}
video {
position: absolute;
left: 50%;
transform:translateX(-50%);
}
Try floating the image which will solve your issue.
Add style="width:100%; height:auto;float:left;" in image tag
<div class="item active">
<img src="../public/images/xxx.png" style="width:100%; height:auto;float:left;">
<div><video height=410px width:470px controls="controls">
<source src="https:xxxxxx" type="video/mp4" />
</video>
</div>
</div>
I currently have a banner, that is 100% wide, but with limited height. Say 100px;
I would like to have my clients put in their branding image in a certain directory, where the browser already looks for this image.
If the image is not found, nothing is displayed, and its business as usual.
If the image is found, then the image is displayed.
At the moment, my code displays an image to indicate that there is supposed to be an image that could not be loaded.
codepen:
#banner {
background-color: aliceblue;
width: 100%;
height: 100px;
}
<div id="banner">
<img src="/images/myImage.jpg"/>
</div>
HTML Based solution
<object data="o.png" type="image/png">
<img src="" />
</object>
https://jsfiddle.net/pratikhegde/mskLf844/
Jquery Based solution:
This works after DOM is ready
$('img').error(function() {
$(this).hide();
});
https://jsfiddle.net/pratikhegde/k5uo4efh/