Video player set up

[theremotedr]

Evening,
This is the page in question, http://www.theremotedoctor.co.uk/clo...rollto=content

I have removed the old player & its files from the page and inserted the following.

<h1>
<video id="video" class="shadow">
<source id="mp4" src="videomp4/cloning-programming.mp4" type="video/mp4">
</video>
</h1>

Could you advise the setup for it to start to play on its own once you arrive on this page.
The video is 700x578

[coothead]

Hi there theremotedr,

try it like this...

<video id="video" class="shadow" autoplay="autoplay">
 <source id="mp4" src="videomp4/cloning-programming.mp4" type="video/mp4">
</video>

coothead

[theremotedr]

Thanks.
As you can see ive taken it from here http://www.theremotedoctor.co.uk/clo...rollto=content

Now just need to make the adjustments so its 700x578 & the border,basically to match the page i took it from.

Also the recycle code so when it finishes it just loops again "constant playing loop"

[coothead]

Hi there theremotedr,

why have you wrapped the video in a "h1 element"?

It is inappropriate and very poor coding.

There should only be one "h1 element" per document and
that should be used for a page title, logo or banner.

Further reading:-

Improper use of numbered headings

coothead

[coothead]

Hi there theremotedr,

for looping try it like this...

<video id="video" class="shadow" autoplay="autoplay" loop="loop">
 <source id="mp4" src="videomp4/cloning-programming.mp4" type="video/mp4">
</video>

coothead

[theremotedr]

Now changed.
Would i need to put the video into its own div so its 700x578 as opposed to its large display now & its radius edges ?

[coothead]

Hi there theremotedr,

it does not need an h1 or a div, you already have it in a container.

This is how the HTML should look...

<section id="content"> 
<video id="video" class="shadow" autoplay="autoplay" loop="loop">
 <source id="mp4" src="videomp4/cloning-programming.mp4" type="video/mp4">
</video>
</section>

...and this is how your CSS should look...

.shadow {
    margin: 1em 0;
    border-style: 1px solid #000;
    box-shadow: 6px 6px 8px #000;
}

coothead

[theremotedr]

I couldn't find the appropriate css file for this container.
I wanted to see why it's not 700x578 like it should be.
I thought putting it on its own code would cover it & wasn't sure if anything was using the same code.

[coothead]

Hi there theremotedr,

you will find it on line #531 of your "normalize.css" file.

If you don't want to alter or use it from there, then
remove the class name of the "video element"
altogether and, using the existing id, add the CSS to
an appropriate file of your choosing.

HTML

<section id="content"> 
<video id="video" autoplay="autoplay" loop="loop">
 <source id="mp4" src="videomp4/cloning-programming.mp4" type="video/mp4">
</video>
</section>

CSS

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

coothead

[theremotedr]

Hi,
Come to a halt so off to bed & see if i can pin point the issue in the morning.

Page in question http://www.theremotedoctor.co.uk/clo...rollto=content

HTML used,

<section id="content"> 
<video id="movavivideo" autoplay="autoplay" loop="loop">
<source id="mp4" src="videomp4/cloning-programming.mp4" type="video/mp4">
</video>
</section>

CSS used & placed in the Normalize.css file line 608

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