Extract code from web advice

**theremotedr** · 09-04-2022, 12:00 PM

Hi,
Here is the url in question.
https://www.ebay.co.uk/itm/115498246827

I see a video clip of which i would also like to use,Not his video but the code in order to use on my page.
Using Firefox dev tool i can see the text BEGIN LINKED VIDEO the code in between and then END LINKED VIDEO.
I believe this is what i require BUT when looking for the code to copy / use either by Ctrl U or doing a search in my editor i just cant find it.

Can you advise please.

**coothead** · 09-04-2022, 02:43 PM

Hi there rheremotedr,

have a look at, and experiment with, this code...

Code:

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

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

<title>Watch the video</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-color: #f9f9f9;
    font: normal 1em / 1.5em  sans-serif;
 }
 h1 {
    font-size: 1.25em;
    font-weight:  normal;
    color: #555;
    text-align:  center;
 }
 #video-link {
    position: relative;
    max-width: 30em;
    margin: 1em auto;
    border: 1px solid #000;
    box-shadow: 0.4em 0.4em 0.4em rgba( 0,0,0,0.4 );
 }
 #video-link a {
   display: block;
   width: 100%;
 }
 #video-link img {
   display: block;
   width: 100%;
   height: auto;
 }
#video-link p:nth-of-type(1),
#video-link p:nth-of-type(2) {
    position: absolute;
    left: 0;
    width: 100%;
    color: #fff;
    text-align: center;
    text-shadow: 0 0 1px #000, 
              -1px 0 1px #000, 
              0 -1px 1px #000;
 }
#video-link p:nth-of-type(1){
    top: -0.25em;
 }
 #video-link p:nth-of-type(2) {
    bottom: 0em;
 }
#video-link span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0.5em 0.75em;
    border-radius: 0.5em;
    background-color: rgba(0,0,0,0.5);
    font-size: 1.5em;
    color: #fff;
    text-align: center;
    transition: 0.5s ease-in-out;
 }
#video-link a:hover span,
#video-link a:active span,
#video-link a:focus span {
    background-color: #cc181e;
}
</style>

</head>
<body>

<h1>Watch the video</h1>

<div id="video-link">
 <a  href="https://www.youtube.com/embed/lHE2CDqJlZA?rel=0">
  <img src="https://img.youtube.com/vi/lHE2CDqJlZA/0.jpg" alt="2004 Honda Goldwing GL1800">
  <p>2004 Honda Goldwing GL1800</p>
  <span>&#x25B6;</span>
  <p>other information</p> 
 </a>
</div>

</body>
</html>

coothead

**coothead** · 09-04-2022, 10:34 PM

Hi there theremotedr,

You might be unaware that the code displayed by the developer
tool is not always to be found in the HTML document itself

For example it may well have been injected by JavaScript.

For reference, if you are interested, this is the precise
method that I used to extract the code...

Position cursor over what you believe to be the video.
Right click.
In the pop-up window, scroll to "Inspect".
Right click.

You will see this highlighted...

Code:

<img src="https://img.youtube.com/vi/lHE2CDqJlZA/0.jpg">

Place the pointer on this line above...
Code:
```
<div class="ytvideo">
```
Right click.
In the pop-up window, select "Edit as HTML".
Right click.
You will now see the full HTML for...
Code:
```
<div class="ytvideo">
```
Right click.
Choose the "Select All" option.
If all the code is highlighted then...
Right click.
Choose the "Copy" option.
Right click.
Open your text editor.
Position cursor anywhere.
Right click.
Choose the "Paste" option.
Right click.

If you managed to navigate this procedure successfully, then
you should see this code in your text editor...

Code:

<div class="ytvideo">
<a target="_blank" href="https://www.youtube.com/embed/lHE2CDqJlZA?rel=0">
<img src="https://img.youtube.com/vi/lHE2CDqJlZA/0.jpg"></a>
<p class="yt_hd">2004 Honda Goldwing GL1800 (Unknown) 3405 Fallen Cycles</p>
<p class="yt_ft">Video will open in a new window<br>Using the eBay App? Paste link into a browser window:</p>
<span class="yt_tag" style="display:none">[isdntekvideo]</span>
<input class="yt_inp" type="text" value="https://www.youtube.com/embed/lHE2CDqJlZA?rel=0">
</div>

coothead

**theremotedr** · 09-05-2022, 09:04 AM

Thanks for the advice & yes i managed to follow it fine.
Ebay decide to remove it each time due to policies etc.

Nevermind but many thanks.

**coothead** · 09-05-2022, 09:18 AM

Hi there theremotedr

are you saying that you wanted to put an youtube video link
on an ebay page rather than one of your own?

coothead

**theremotedr** · 09-05-2022, 09:23 AM

Yes but reading about they do not accept active content

**coothead** · 09-05-2022, 09:46 AM

Hi there the remotedr,

are you saying that ebay does not allow links to other sites on their pages?

coothead

**theremotedr** · 09-05-2022, 10:02 AM

I believe so but the advert i showed you obviously works & hasnt been taken down.
My goal was to use a 640 x 480 video clip to fall in line with my 640 x 480 images

**coothead** · 09-05-2022, 10:30 AM

Hi there theremotedr,

So what is the problem?

Where is your video clip hosted?

You dont need to to use the code that I originally posted.
It could be as simple as this

Code:

<a  href="https://www.youtube.com/embed/lHE2CDqJlZA?rel=0" 
  style="display:block;width:100%;max-width:640px;margin:auto">
  
  <img src="https://img.youtube.com/vi/lHE2CDqJlZA/0.jpg" alt=""
    style="display:block;width:100%;height:auto;">
</a>

I can see no reason why you could not add code like that to your ebay page.

coothead