Could you assist with a responsive code please.

Here is the page in question.
http://www.theremotedoctor.co.uk/fli...ary-navigation

As you see it on the page im happy with what it does.
But im stuck with regards its display on other devices.
Ive tried a few codes but only made things look a mess.

Hi there theremotedr,

try changing this...

Code:

---


<h1>
 <video id="myvideo3" controls poster="m-images/flip-splash-screen.png" alt="Honda car key flip remote upgrade"" width="640" height="480">
  <source src="http://vid670.photobucket.com/albums/vv62/ipbr21054/VIDEOS/640x480test.mp4" />
 </video>
</h1>

---

...to this...

Code:

---


<h1>
 <video id="myvideo3" controls poster="m-images/flip-splash-screen.png" title="Honda car key flip remote upgrade">
  <source src="http://vid670.photobucket.com/albums/vv62/ipbr21054/VIDEOS/640x480test.mp4" />
 </video>
</h1>

---

...and adding this...

Code:

---


#myvideo3 {
    width:82%;
 }

---

...to your stylesheet.

coothead

Hi,
Thanks for that but the issue was still the same.
However i have now managed to reverse the issue where the ios device is spot on in respect of its looks and how it works etc.
The not so big a problem is that the splash screen image/video on the pc has now enlarged,not a big deal but nice to have it like the other pages.
Here is the page with the enlarged image/video,
http://www.theremotedoctor.co.uk/fli...ary-navigation

If you compare it to what it was like which is the same on this page.
http://www.theremotedoctor.co.uk/for...ary-navigation

Like i say not a big deal but would be nice to match,im happy the ios is sorted.

Ive used this css

Code:

---

        /* Half screen width and centred */
        #container {
            width: 50%;
            margin: 0 auto;
        }

        /* Fill the container's width */
        video {
            width: 100%;
            height: auto;
        }

---

I need a tweak for the ios video but lets get this sorted first,what do you think ?

Thanks for your time.

Hi there theremotedr,

Quote:

---

Thanks for that but the issue was still the same.

---

Are you sure that you implemented my suggested amendments correctly?

My test page - ( see attachment ) - compares very favourably with the
page that you state is totally satisfactory...

http://www.theremotedoctor.co.uk/for...ary-navigation

coothead

coothead you are correct,i put the width code in the wrong place.
Now its in the correct place i can see what is happening,thanks for that.

I have put it here for you to look at, http://www.theremotedoctor.co.uk/y.html
I have it at the width that i would like but i need to shift it left,see photo attached please.

http://i670.photobucket.com/albums/v...rimageleft.jpg

Hi there theremotedr,

just change this...

Code:

---


#myvideo3 {
    width:90%;/* adjust this value to suit */
 }

---

...to this...

Code:

---


#myvideo3 {
    display:block;
    width:90%;/* adjust this value to suit */
 }

---

coothead

Thanks again.
That sorted that out.
Here were the other 2 tweaks if you could be so kind to assist.
1,When you arrive at this page to see the image splash screen and the play button.
Once the video is finished playing the last frame of the video is shown on the screen.
After its finished can we make it be ready again,i mean return to the splash screen and play button as if weve just come to this page.
2,Take this page for example http://coolestguidesontheplanet.com/videodrome/youtube/
On the pc the video stays the same size,plays & then finishes which is ok for me.
But on the iphone you click on play,all the text dissapears and the video jumps out at you,it finishes then minimises back down and text is shown.
The reason for this is currently my video ends but stays on the page thus clicking end/finish etc so you then return to the original page.

Hi there theremotedr,

I cannot help you with "iPhone" problems, I only have a p.c.

For the 'return to start' problem, add this script to the
document just before the closing "</body>" tag...

Code:

---


<script>
  'use strict';
(function() {
  document.getElementById('myvideo3').onended=function() {
  this.load();
 };
})();
</script>

---

coothead

No problem thanks.
If I was thinking of having say 5 buttons on my page and each would have a specific video assigned to each button what extra work is needed.
I will be assigning one video to each button soon and with that video it will play the size and position currently in place now that side has been great fully accomplished.

Hi there theremotedr,

you can find a video playlist example here...

http://www.mediafire.com/download/t5...o-playlist.zip

You may be able to adapt it to your requirements. ;)

coothead