Coding on border in re color style

satimis · 08-19-2014, 10:52 PM

Hi all,

Where can I find coding example on border for video?

Example:

Code:

<div style="padding:10px;background:#000;webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;width:560px;margin:0 auto;overflow:hidden;">
    <iframe src="http://www.youtube.com/embed/MOVIEID?fs=1&autoplay=1&loop=1&rel=0&border=0&modestbranding=1" width="560" height="315" frameborder="0"></iframe>
</div>

in respect of color and style?

Thanks

Regards
satimis

notKlaatu · 08-20-2014, 01:00 AM

Code:

border: 2em solid #aa1211;

that's it. I'd put that around the div rather than the iframe but you can try either.

satimis · 08-20-2014, 08:52 AM

Quote:

Originally Posted by notKlaatu

Code:

border: 2em solid #aa1211;

that's it. I'd put that around the div rather than the iframe but you can try either.

Hi,

Thanks for your advice.

I'm trying to create borders on the video
Taoist Temple Lahug, Cebu City.
http://phgallery3.reynoldstocks.com/cebu-city-3/

I found that code on Internet. I have no idea how to change the border colour nor its width on both sides. Previously I saw video with wooden frame on 4 sides. I wonder how to make it? Could you shed me some light? Thanks

Regards
satimis

notKlaatu · 08-24-2014, 05:30 PM

As usual in things code-related, I can think of a few ways of achieving this but I think the easiest would be to place the video inside a div that has a wood grain background image. So the html would look like....

Code:

<div class="wood">
   <div class="video">
    <iframe src="http://www.youtube.com/embed/MOVIEID?fs=1&autoplay=1&loop=1&rel=0&border=0&modestbranding=1" width="560" height="315" frameborder="0"></iframe>
   </div> <!--closes video-->
</div> <!--closes woodgrain-->

and the css:

Code:

.wood {
  backround: url("/path/to/wood/image.jpg");
  padding: 4ex 3em;
}

.video {
   border-radius: 20px;
   width:560px;
   margin: auto;
   overflow:hidden;
}

This should create a video div nested inside of another div (which has woodgrain as its image), with some padding around the edges. The padding will reveal the woodgrain, giving the appearance of a wooden border around the video.

You might have to adjust margins ond image repeats/tiling and things like that, but that is the general idea.

satimis · 08-24-2014, 10:42 PM

Quote:

Originally Posted by notKlaatu

As usual in things code-related, I can think of a few ways of achieving this but I think the easiest would be to place the video inside a div that has a wood grain background image. So the html would look like....

Code:

<div class="wood">
   <div class="video">
    <iframe src="http://www.youtube.com/embed/MOVIEID?fs=1&autoplay=1&loop=1&rel=0&border=0&modestbranding=1" width="560" height="315" frameborder="0"></iframe>
   </div> <!--closes video-->
</div> <!--closes woodgrain-->

and the css:

Code:

.wood {
  backround: url("/path/to/wood/image.jpg");
  padding: 4ex 3em;
}

.video {
   border-radius: 20px;
   width:560px;
   margin: auto;
   overflow:hidden;
}

This should create a video div nested inside of another div (which has woodgrain as its image), with some padding around the edges. The padding will reveal the woodgrain, giving the appearance of a wooden border around the video.

You might have to adjust margins ond image repeats/tiling and things like that, but that is the general idea.

Hi,

Thanks for your advice.

Coding

Code:

<div class="wood">
   <div class="video">
    <iframe src="//www.youtube.com/embed/ETiWVZcVfmw?feature=player_detailpage" width="960" height="540" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div> <!--closes video-->

.wood {
  background: "http://path/to/dark_blue_horizontal_1.jpeg";
  padding: 4ex 3em;
}

.video {
   border-radius: 20px;
   width:960px;
   margin: auto;
   overflow:hidden;
}
</div> <!--closes wood-->

It didn't work.

following coding appears on webpage

Code:

.wood {
background: “http://path/to/dark_blue_horizontal_1.jpeg”;
padding: 4ex 3em;
}

.video {
border-radius: 20px;
width:960px;
margin: auto;
overflow:hidden;
}

Also tried

Code:

 background: url("http://path/to/dark_blue_horizontal_1.jpeg");

same result.

Video still works

Regards
satimis