Im using a JS Plugin I found on GitHub that makes a video header parallax, the problem is that when I run it responsive for phone the video turns black, im trying to change the video for an image when responsive mode.
I tried with #mediatag but can't make it work.
<main style="height: 100%">
<video class="bv-video"></video>
</main>
<script>
const backgroundVideo = new BackgroundVideo('.bv-video', {
src: [
'img/01.mp4',
'img/01.mp4'
],
onReady: function() {
// Use onReady() to prevent flickers or force loading state
const vidParent = document.querySelector(`.${this.bvVideoWrapClass}`);
vidParent.classList.add('bv-video-wrap--ready');
}
});
</script>
Link for the plugin - Licensed under the MIT license
Using media queries, its simple.
All you would need to do is write a media query in your css to display your image at a maximum screen width and display none for your video. Also set the image display to none outside of the media query so it defaults to that until the media query detects the mobile screen width and changes it.
Related
Hi all I am using Signalwire's video calling functionality to make a video calling app. I am facing one issue here, as most of the times, we use video calling through phones or small screen sizes the height of the video is very small there.
Is there any way to increase the height of that div on which the video stream is getting injected?
Here What it looks like-
In mobile my video screen is quite small I want to increase the height.
I tried something like-
$scope.roomObject = new SignalWire.Video.RoomSession({
token: token,
rootElement: document.getElementById('root'), // an html element to display the video
audio: true,
video: {
width: { min: 720},
height: { min: 1280}
}
}
});
This does change the inner video into portrait mode but the issue remains, I can't increase the height.
Note- increasing the height of div not working I can increase the width though.
Thanks
It sounds like you're trying to extend the video canvas vertically to fill the entire screen. While you can change the aspect ratio of your video stream itself (which is how you're swapping your stream to portrait), you can't change the aspect ratio of the whole canvas.
I have looked over examples online, yet I believe I am overlooking something. I have two similar images that need to be rendered when the screen is at a different size. One image at 1440px screen size and one at 375px screen size. Right now with my code I have set the initial source to render the "mobile view" of the image, and with the srcset of the desktop view image at 1440w. When I load up live server it shows the desktop image, and not the initial source of the mobile view. So it seems to be working but missing a step.. any tips are greatly appreciated!
<img
class="future__container--img"
src="./images/illustration-editor-mobile.svg"
srcset="./images/illustration-editor-desktop.svg 1440w"
alt="illustration-editor-mobile"
/>
So when the browser first loads it is showing the desktop.svg, but when I set the browser to 375px it still displays the desktop.svg. I first had this written in javascript ..
const resizeEditiorImg = () => {
const reswidth = screen.width;
let image = document.querySelector(".future__container--img");
if (reswidth >= 1440) {
image.src = "../images/illustration-editor-desktop.svg";
} else {
image.src = "../images/illustration-editor-mobile.svg";
}
};
window.addEventListener("resize", resizeEditiorImg);
But the issue here is that when the browser first loads on desktop view, it is displaying the mobile image unless the user manually resizes the browser, which is what I believed at first. I hope this post makes sense!
This only work in resize browser because this code resizeEditiorImg
you need run this command resizeEditiorImg in your load page.
example
<body onload="resizeEditiorImg()">
So I'm a graphic designer with next to no coding knowledge, and want to learn. My friend and partner who is a web developer is away.
I am trying to replace a logo on our responsive site when the dimensions are under a certain amount of pixels or when a mobile view is displayed.
Got half of it working, on scroll down but then when adding this bit to try and have resize of browser which changes the navigation bar, the nav bar misbehaves and becomes a big static block.
Tried firebug and got stuck.
$(window).resize(function()
{ if($( window ).width()<750){ img.src = img.dataset.scroll; // set the scroll image
}
else
{ img.src = img.dataset.orig; // set the original image back
}
});
don't use javascript for this, but css #media queries: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
I have an Angular.js application with dynamically background images (should have data-binding for their URL). I also want to use css media queries in order to detect orientation/pixel density etc.
The only solution I found is using javascript to add URL to the background image, something like this:
myDiv.css({'background' : 'url('+ scope.objectData.poster +') no-repeat', 'background-size':'auto 100%'});
This way I have to pass all media queries logic to javascript, something like this. (My intention is to be able to serve different background image for each screen resolution / pixel density / orientation)
I am looking for a cleaner solution to use css media queries and still be able to data-bind my image sources.
tnx!
Yaniv
This is just a starting point solving your problem.
You may use matchMedia: https://developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia
if (window.matchMedia("(min-width: 400px)").matches) {
$scope.poster = 'small.png';
} else {
$scope.poster = 'big.png';
}
now you can use it in the html file:
<div class="moments-preview-image"
ng-style="{'background-image': 'url('+poster+ ')'}"> ... </div>
If your browser doesn't support this new API you may have a look on some interesting workarounds:
http://wicky.nillia.ms/enquire.js/
http://davidwalsh.name/device-state-detection-css-media-queries-javascript
I'm using JW Player to show a Flash video (although it will soon have HTML5 sources where browser support allows).
Until the user takes an action on the page, the video needs to be invisible (but loaded). Once they take that action, the video div is shown and I'd like to play() the video as immediately as possible.
Here's my setup() call. <div id="video"> is hidden in my CSS file, as is JW Player's <div id="video_wrapper"> (both set to display: none; initially).
jwplayer("video").setup({
playlist: [
{
sources: [
{ file: 'http://example.com/video.flv' }
]
}
],
controls: false,
wmode: 'transparent'
});
And some time later, I'm doing this:
$('#video').show();
$('#video_wrapper').show();
jwplayer().play();
I don't get any errors in the console and the video plays fine if I don't first hide the containing divs in my CSS file.
Does JW Player not fire its setup() method on a hidden element? And, if not, how should I achieve the result I want?
See if the solution here works for you:
Unable to play audio when JWPlayer is hidden
Position the containing div so that it is no longer visible, then call the setup function on it. Your show function will have to be a little more complex to change the display settings back to how you want them to be.