My video as background image code needs fixing...pls help

Question

0.00/5 (No votes)

See more:

Im trying to do this:
How To Create a Fullscreen Video Background[^] lesson

I've got video to show but this part:-

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}</

does not work so video is of position and exceeds 100% screen.
Where do I put this code or is it just parsed incorrectly?
Or can you just recommend an easy-peasy one?

Thank U ppl!

What I have tried:

looking for different syntax and parsing

<script><head><source> var <video><div>

etc

Posted 22-Jan-20 7:24am

infamousbreed

Updated 22-Jan-20 7:59am

Add a Solution

2 solutions

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Kris Lantz · Answer 1 · 2020-01-22T07:48:00

Solution 1

Some research from here: Responsive Web Design Videos[^]
suggests that a max-width and height should be set to allow the video player to scale down to fit the video within the window.
I suspect the min values are tied to the video itself, and not the window space available. So, you're getting 100% of the video size at whatever resolution.

Posted 22-Jan-20 7:48am

Kris Lantz

Updated 22-Jan-20 8:00am

Comments

infamousbreed 22-Jan-20 18:14pm

I tried that but the whole code is having no effect at all so halving down to 50% still shows video the same. i supposed if the entire code is not being picked up by the browser then it must be in the wrong place or typed incorrectly, or missing one of these things ---> "{"

phil.o · Answer 2 · 2020-01-22T08:00:00

Solution 2

This is a css specification, so it usually goes into its own css file, linked in the html document with a <link rel="stylesheet"...> tag, or directly included in the html document with a <style> tag.
CSS Tutorial[^]

Posted 22-Jan-20 8:00am

phil.o

Comments

infamousbreed 22-Jan-20 18:26pm


<link rel="stylesheet" href="style.css" type="text/css" media="video/mp4" />



</head>
<!-- The video -->
<video autoplay muted loop id="myVideo">
  <source src="videobg.mp4" type="video/mp4">
  
  
</video>

    #myVideo {
  position: fixed;
  right: -50;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}
<script>


var video = document.getElementById("myVideo");


</script>

in the media="video/mp4" tag ive tried "video/mp4" and "myVideo" both no effect

phil.o 22-Jan-20 18:40pm

Your css specification is not included properly; please read HTML CSS to know how to do it right. I would also advise to define the css before using it and not after like you did. Finally, you should remove the media attribute from the link tag; it does not belong here.
You should study and get familiar with these basic html constructs; for now, you seem to write your code randomly, hoping it will work. But that's not a very good way of learning.

My video as background image code needs fixing...pls help

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

My video as background image code needs fixing...pls help

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us