Adding video into my html file

**theremotedr** · 12-14-2015, 03:23 PM

Hi,
I wish to make an edit into my file.
Currently i use 2 photos within the code below BUT i would like the lower 640 x 480 box to show a video now.
I am not to sure how i would add the code that ive found on the internet into my existing code in use.
Please could you advise.

Current code with 2 images.

Code:

<!-- saved from url=(0022)http://internet.e-mail -->
<style>
#container{
width: 800px;
margin: 20px auto 20px auto;
}
#header{
width: 750px;
height: 100px;
margin: 50px auto;
}
.ebayimagetop, .ebayimagebottom{
width:640px;
height:250px;
margin:5px auto;
border: 4px #000099 solid;
-webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.50), 0 0 40px rgba(0, 0, 0, 0.08) inset;
-moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.50), 0 0 40px rgba(0, 0, 0, 0.08) inset;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.50), 0 0 40px rgba(0, 0, 0, 0.08) inset;
}

.highlight{
color: #FFFFFF;
font-weight: bold;
font-size: 18px;
}
#textarea{
width:640px;
margin:5px auto;
text-align: center;
color:#000099;
}
#textarea p{
text-align: center;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 20px;
line-height: 30px;
}
body{
background-image: url(http://www.theremotedoctor.co.uk/ebay/Background1600x1400.jpg);
background-repeat: no-repeat;
}
.alert{
color:#FF0000;
font-weight:bold;
}
.box {
background-color: #999999;
width:640px;
margin:5px auto;
border: 4px #000099 solid;
-webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.50), 0 0 40px rgba(0, 0, 0, 0.08) inset;
-moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.50), 0 0 40px rgba(0, 0, 0, 0.08) inset;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.50), 0 0 40px rgba(0, 0, 0, 0.08) inset;
}
</style>
<title>VIDEO</title>
<div id="container">

<div id="header"><img src="http://i670.photobucket.com/albums/vv62/ipbr21054/IVYLODGESALES/logo.jpg" alt="logo" height="100" width="750"></div>

<div class="ebayimagetop"><img src="http://i670.photobucket.com/albums/vv62/ipbr21054/EBAYLOGOS/awaiting_image.jpg"></div>

<div class="ebayimagebottom"><img src="http://i670.photobucket.com/albums/vv62/ipbr21054/EBAYLOGOS/awaiting_image.jpg"></div>

<div id="textarea" class="box">
<p>TEXT</p>
<p>TEXT</p>
<p class="highlight">TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<p class="alert">TEXT</p>
<p>TEXT</p>
</div>
</div><!-- END CONTAINER DIV -->

Here is the code that i would like added.

Code:

<p align=”center”>
<object height=”480? width=”640?><param
name=”movie”
value=”http://vid670.photobucket.com/albums/vv62/ipbr21054/VIDEOS/TEST.mp4”><param
name=”allowFullScreen” value=”true”><param
name=”allowscriptaccess” value=”always”>
<embed src=”http://vid670.photobucket.com/albums/vv62/ipbr21054/VIDEOS/TEST.mp4”
type=”application/x-shockwave-flash” allowscriptaccess=”always”
allowfullscreen=”true” height=”480? width=”640?></object></span></strong></p>

**Beverleyh** · 12-14-2015, 05:27 PM

That's a very old video embed code. Aside from the syntax errors, I doubt it would work on iDevices. Is there any reason why you aren't using an HTML5 video element? If you haven't already, look into that. Alternatively, look for an HTML5 video player script with Flash fallback for old browsers.

Whichever code you opt for, try putting it into the markup where you want it to appear - instead of the img or whatever element you want the video to replace (it currently isn't clear which element holds the 640 X 480px image). Then if it doesn't 'work' as expected, post a link to the page in question explaining why it isn't working, what is actually happening and what behaviour you expect it to/would like it to adopt instead. Also indicate clearly what you've tried on your own to remedy the problem.

Once you provided further information, somebody can take a look and make suggestions to help.

**coothead** · 12-14-2015, 05:50 PM

Hi there theremotedr,

try it like this...

Code:


<!DOCTYPE html>
<html  lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>VIDEO</title>

<style>
body {
    background-image: url(http://www.theremotedoctor.co.uk/ebay/Background1600x1400.jpg);
    background-repeat: no-repeat;
 }
#container {
    width:800px;
    margin:20px auto;
 }
#header {
    width:750px;
    height:100px;
    margin:50px auto;
 }
.ebayimagetop, .ebayimagebottom {
    width:640px;
    margin:5px auto;
    border:4px solid #009;
    box-shadow:2px 2px 8px rgba(0,0,0,0.50),0 0 40px rgba(0,0,0,0.08) inset;
 }
.ebayimagebottom video {
    display:block;
    width:640px;
    height:360px;
 }
#textarea {
    width:640px;
    margin:5px auto;
    text-align:center;
    color:#009;
 }
#textarea p {
    text-align:center;
    font-family:'trebuchet ms',arial,helvetica,sans-serif;
    font-size:20px;
   line-height:30px;
 }
.box {
    background-color:#999;
    width:640px;
    margin:5px auto;
    border: 4px solid #009;
    box-shadow:2px 2px 8px rgba(0,0,0,0.50),0 0 40px rgba(0,0,0,0.08) inset;
 }
.highlight {
    color:#fff;
    font-weight:bold;
    font-size:18px;
 }
.alert {
    color:#f00;
    font-weight:bold;
 }
</style>

</head>
<body>
<div id="container">

<div id="header">
 <img src="http://i670.photobucket.com/albums/vv62/ipbr21054/IVYLODGESALES/logo.jpg" height="100" width="750" alt="logo">
</div>

<div class="ebayimagetop">
 <img src="http://i670.photobucket.com/albums/vv62/ipbr21054/EBAYLOGOS/awaiting_image.jpg" alt="">
</div>

<div class="ebayimagebottom">
 <video autoplay loop>
  <source src="http://vid670.photobucket.com/albums/vv62/ipbr21054/VIDEOS/TEST.mp4" type="video/mp4">
 </video>
</div>

<div id="textarea" class="box">
<p>TEXT</p>
<p>TEXT</p>
<p class="highlight">TEXT</p>
<p>TEXT</p>
<p>TEXT</p>
<p class="alert">TEXT</p>
<p>TEXT</p>
</div><!-- end textarea div -->

</div><!-- end container div -->

</body>
</html>

coothead

**theremotedr** · 12-14-2015, 06:25 PM

Coothead thats spot on.
Many thanks for helping thats what i needed but its looping.
How is a play button added so when the page is first viewed the customer can then press play etc

**coothead** · 12-14-2015, 07:00 PM

Hi there theremotedr,

use this amended code...

Code:


 <video controls poster="test.jpg">
  <source src="http://vid670.photobucket.com/albums/vv62/ipbr21054/VIDEOS/TEST.mp4" type="video/mp4">
 </video>

...and the attached image for the...

"poster" attribute.

coothead

**theremotedr** · 12-14-2015, 07:10 PM

Cheers coothead,you know your stuff.
Thats spot on.
Just what i required.

Maybe you could also take a look here if you have some spare time,much appreciated.

http://www.dynamicdrive.com/forums/s...338#post315338

**theremotedr** · 12-22-2015, 04:49 PM

Here is the page in question
http://www.ebay.co.uk/itm/401041830465?ssPageName=STRK:MESELX:IT&_trksid=p3984.m1555.l2649

The video ends and stays on the last frame.
Where would i need to apply the code below "if correct for this page" so the video returns to the start again like my other post.

Code:

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

As this is ebay im not sure if they will allow the script ?
I will find out once advised on the correct place to add it.

**coothead** · 12-22-2015, 05:25 PM

Hi there theremotedr,

I know nothing about "eBay" limitations, but you could try using this...

Code:


<video controls poster="test.jpg" onended="this.load()">
  <source src="http://vid670.photobucket.com/albums/vv62/ipbr21054/VIDEOS/honda_flip_upgrade.mp4">
 </video>

...which, is not how I would like to code, but....

coothead

**theremotedr** · 12-22-2015, 05:49 PM

Hi,
That works fine.
Question "i know you dont have iphone"
Using the iphone,if i go to the listing and play the video the whole page,video images etc are huge and need to manually resize the page.

Having said that also on the iphone if i click the link to the page all is perfect.
Wonder why this is as its the same page at the end of the day.
No problem just thought i would mention it.

Thanks and happy xmas.

**coothead** · 12-22-2015, 06:09 PM

Hi there theremotedr,

Fortunately, for me anyway, I do not have any kind of mobile phone.

My land line fills all of my communication needs.

Perhaps Beverley can help you with your "iPhone" problems.

coothead

Thread: Adding video into my html file

Thread Tools

Search Thread

Adding video into my html file

The Following User Says Thank You to Beverleyh For This Useful Post:

The Following User Says Thank You to coothead For This Useful Post:

The Following User Says Thank You to coothead For This Useful Post:

The Following User Says Thank You to coothead For This Useful Post:

Similar Threads

with innerHTML may include a whole html file (this file without <html><body> tags eg

Adding a Video Box in my homepage

Adding Video Files to a Web Pages

Adding a .fla preloader to .flv video for website?

Adding a video message

Bookmarks

Bookmarks

Posting Permissions