Could you assist with a responsive code please.

[theremotedr]

Here is the page in question.
http://www.theremotedoctor.co.uk/flip_upgrade.html?scrollto=secondary-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.

[coothead]

Hi there theremotedr,


try changing this...


<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...


<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...


#myvideo3 {
width:82%;
}
...to your stylesheet.


coothead

[theremotedr]

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/flip_upgrade.html?scrollto=secondary-navigation

If you compare it to what it was like which is the same on this page.
http://www.theremotedoctor.co.uk/ford_programming.html?scrollto=secondary-navigation

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

Ive used this css

/* 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.

[coothead]

Hi there theremotedr,



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/ford_programming.html?scrollto=secondary-navigation



coothead

[theremotedr]

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/vv62/ipbr21054/FORUM%20POSTS/drimageleft.jpg

[coothead]

Hi there theremotedr,


just change this...


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


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


coothead

[theremotedr]

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.

[coothead]

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...


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


coothead

[theremotedr]

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.

[coothead]

Hi there theremotedr,



you can find a video playlist example here...


http://www.mediafire.com/download/t585iir4dagl2l9/video-playlist.zip

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



coothead

[theremotedr]

Hi,
Not only struggling trying to get the code onto my buttons but interent gone down last 24 hours and now dead slow.
Ive updated this page with the code http://www.theremotedoctor.co.uk/flip_upgrade.html?scrollto=secondary-navigation

[coothead]

Hi there theremotedr,


check out the attachment to see the " buttonised" version. ;)


cooothead

[theremotedr]

Hi,
Thanks very much.

Ive got a couple of questions if i could ask you please.
When you first arrive at this page http://www.theremotedoctor.co.uk/flip_upgrade.html?scrollto=secondary-navigation can we just have the splash screen withoutout the video.
Currently there is an indian chap when you click on play,dont even see where his code but but would just require the splash screen until a selection is made from the list on the right,then be able to play that assigned clip.

In a previous file we used the below code to keep the splash screen / clip at the correct size,now need to somehow incorporate this into this new code as currently both are huge.
Would we need to add to the css but to re-word etc ?

#flipupgradevideo {
display:block;
width:100%;/* adjust this value to suit */


Thanks again for the advice.

[coothead]

Hi there theremotedr,


check out version 3. ;)


coothead

[theremotedr]

Morning,
Ive added the 2 new files but dont seem to have any clip played once you select from the list on the right.
Here is the latest page http://www.theremotedoctor.co.uk/flip_upgrade_copy.html

[coothead]

Hi there theremotedr,


the link that you provided is working OK in my test browsers.
Perhaps you have a cache issue.
Use the F5 key to clear it.


coothead

[theremotedr]

Tempery glitch,now working.
I understand you dont have an iphone.
With the code in use the other day "shown below" i was able to size the splash screen/video etc to how i required it to be shown on the pc.
This had no affect on the iphone & was the perfect size / position.


#flipupgradevideo {
display:block;
width:100%;/* adjust this value to suit */

With the latest downloaded file this morning the size/position is now incorrect on the iphone.
How/where can i have control over the size so i can play with it myself and see changes ?
If this is not possible can we somehow use the code where it worked fine & i can control size etc.

Thanks again for the inout.

[coothead]

Hi there theremotedr,



you will find the amended code here...


<style>
.img-border {
border:2px solid #000;
}
#splash {
display:block;
}
#player {
display:block;display:none;
width:75%;/* adjust this value to suit */
}




coothead

[theremotedr]

Hi,
Ive found it and changed it to 100% which was what i had done before to achieve the size / position for the pc.
Remember this had no affect on the iphone which was good as it was just perfect.
Now i have noticed that by changing the % value the size now alters on the iphone.
Having it at 100% is perfect on the iphone but to big for the pc.
Change the value to just say 80% so the pc is correct the iphone is now to small ?

Also before we mentioned about after the video had ended it would stay on the last frame of the clip.
You advised a code shown below so it would return to the splash screen once the clip had ended as if we had just came to this page.
Now with the code added before the closing boday tag the clip stays on the last frame again and not returning to the splash screen Dr image.

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

[coothead]

Hi there theremotedr,


sorry about that I misread your requirement. :o :o :o

replace your existing "player.js" file with the amended attachment. ;)


coothead

[theremotedr]

All done.
Thanks very much for youre help.

I made a reply to the other post you advised me on.

[coothead]

No problem, you're very welcome. ;)


coothead