I am trying to match an html video to a css fullscreen background that is centered in the screen. I want the video to seamlessly match the background no matter what size the screen is. Please help all you master css guys and gals. Thanks!
the image is at:
Screenshot of video and background
Try to take a look at the codde in this fantistic site, where the video also is integrated with a map, where you are ind the Video.
http://nrk.no/nordlandsbanen/
Cheers
JanCoyle
Related
I have search all over the internet and tried for hours to resolve the issue with no avail!
Visit http://testdrupal.ml/node/126 on your mobile device or from your desktop but with resized window to any size... and you will notice a black background will show up at the right side of the screen.
I have tried for hours to play with css and yet the problem not solved!
Can someone please point me to the right css style to be used in order to make this black background disappear ?
Using:
Drupal 8.6.10
Default Bartik theme
An image showing the black background
I want to provide the full css code but the project is private and I can only provide full information with website access in a private chat... I hope someone will be interested!
Many websites use this, but https://modsquad.com/ was the first example I found. When you visit the site their background image (video in this case) is the full width and length of whatever screen you are viewing it on, directly below it is separate content, but you only see the video prior to scrolling down. How do you achieve this? In my search for the answer to this question I have only seen examples that set the entire html background to a certain image, which is not what I am looking for. Thanks in advance for help.
Visit here : https://modsquad.com/ , and open console, you can see what they do.
When the browser is resized, the video(or image) changes its height.
You can do it via javascript, read this question : JavaScript - Get Browser Height
Left side image is Desktop screenshot and the right side image is Mobile screenshot. See the right side screenshot, image icons showing blurry. Can you please tell me what's the solution for it?
Please note, I have also tried the following solution. But, don't working.
background image looks terrible on mobile
Please use an image with high resolution and quality.
The image you are using is ~ 10kb ...use image bigger image for this, you have to save your image with high dpi .
For mare details please refer this https://en.wikipedia.org/wiki/Dots_per_inch
In the attached example (here) there is the first background image of the woman in the car, I would like to transfer this out and instead put an auto run, on loop video (mp4) full width and same height in the place. All other copy and content is to remain the same - any ideas how I can do this simply?
All other images if you click on the arrows should also remain. Thanks!
For simplicity. You may use a GIF as a background-image:url(GIF_PATH) instead of a video.
Here is a codepen example
https://codepen.io/leemark/pen/dJxHp
or else you have use the HTML element to embed video content in a document.
https://developer.mozilla.org/en/docs/Web/HTML/Element/video
Also you may also like to have a look at owl corousel
On my site, the logo is up to search block when I try to view the site from tablets and phones, but from a PC it is OK. I included a photo to show you what I mean. Can anyone help me fix this?
As look from tablets and phones:
This is happening because your image width and height are predefined. This means that no matter what device you're on, the image will keep to the defined width/height.
You will need to make your image responsive.
You can do this by wrapping the image in a div that's got a defined width/height (perhaps a bootstrap grid column) and then apply Bootstrap's `.img-responsive' class on your image.
I'd provide a code example once you post your code & the position of where the image needs to be. (see comments on your main thread)
Try add .img-responsive class to the tag in your theme files.