Video player set up

I have now added Controls and this is what i see,

IPAD
......
Landing on the page start of video is shown with a triangle play button in the middle. "This is ok"
Clicking the play button then starts the video. "This is ok"
The video runs its course & once finished returns to the start where on its own starts to play again. "This is ok"
"Video works spot on"



IPHONE
..........
Works exactly the same as above,apart from one issue. "See below"
Problem is when the phone is in Landscape mode you only see say 3/4 of the viewing video etc.
The output for Landscape mode needs to fit the screen so you see the all the image & its text above & below it,output needs to be scaled down to fit.
When viewing in Portrait mode all is ok & no issues.
"Video works spot on"



PC
...
Landing on the page start of video is shown BUT say like a letter box 700x300 "Needs attention"
Then the video automatically changes to its correct size 700x578
The player controls are below the video as opposed to the middle like iphone & ipad, "This is ok"
The video starts without any need to press the play button. "This is ok"
The video runs its course & once finished returns to the start where on its own starts to play again. "This is ok"
When it returns to the start it stays the 700x578 size.
I only see the letter box 700x300 when you first land on the page
"Video works spot on"

Screen shots below of iphone in landscape & portrait mode.

Attachment 6032
Attachment 6033

So,
iPhone output for viewing in landscape mode needs altering so its all in the viewable part of the screen.
Pc needs to just show 700x578 when landing on the page without the need to see say 700x300 then some magic to 700x578

Overall perfect.
Just need to sort the two issues.

Quick video showing letter box.
http://www.theremotedoctor.co.uk/vid...ox-example.mp4

Hi there theremotedr,

try adding width and height...

Code:

---


<video id="movavivideo" controls muted playsinline autoplay loop width="700" height="580">

---

coothead

I did try that but still the same.
I didnt mention it before as i was going to see what you thought.
I will live with this.

So can you please point me in the correct direction for looking at the output code etc so the video in landscape mode is correct.

can we apPly its own css for display purposes,so i can they alter the size until it looks ok ?

Hi there theremotedr,

unfortunately, you have lost me a little bit,
to what browser/OS does this problem relate?

coothead

End of post 31
iPhone output for viewing in landscape mode needs altering so its all in the viewable part of the screen.
Looking in the Normalize css file at line 604 i see this,

Code:

---

video {
 width: 100%;
 height: auto;
}
#movavivideo {
    max-width: 43.75em;
    margin: 1em 0;
    border: 0.06em solid #000;
    box-shadow: 0.5em 0.5em 0.5em #000;
}

---

Is the alteration made there or in the Basic css file at some @media screen point

Looking to just make the Landscape height smaller so all the video can be seen as at present im having to scroll up/down to see it all.

Hi there theremotedr,

try these values in a test page...

Code:

---


#movavivideo {
    width: 100%;
    max-width: 43.75em;
    height: auto;
    margin: 1em 0;
    border: 0.06em solid #000;
    box-shadow: 0.5em 0.5em 0.5em #000;
    box-sizing: border-box;
}
@media screen and (max-width: 46em) {
#movavivideo {
    width: 64%;
    margin: 0.5em auto;
  }
 }
@media screen and (max-width: 30em){
#movavivideo {
    width: 100%;
    margin: 0.5em auto;
  }
 }
@media screen and (max-width: 20em) {
#movavivideo {
    width: 100%;
    margin: 0.5em auto;
  }
 }

---

Hi,
Ive installed that code in place of the code in Normalize css line 604
Pc is fine.

Iphone need some slight adjustment,but not much.
When you land on this page in portrait mode the video is shown slightly to far down the screen and needs to come up.

When you turn the phone to landscape mode the video is shown slight to high the screen so needs to come down.

If you can advise which setting i need to alter i can take a look at it.

Just a question,
Even though i set it up so it looks fine on my iphone how will this take affect for other makes of phone, i mean will it also be within view for them also ?

My mistake.
Just landscape need to bring video down the screen a touch.