CODEWITHSUNDEEP
cssvideosquarespacevideo-embedding
user3766722
user3766722

Reputation: 89

how to remove border from embed video (squarespace)

I'm using following code for to embed video, play without any control and auto play and loop. And its working fine, but the issue is its automatically creating a border on the video. 

<video width="1000" height="450" loop autoplay="autoplay" />
 <source src="/s/m31.mp4" type="video/mp4" />

And i have tried <param name="border" value="off">

But still border into the video. Pl anyone help how to remove the border line.

Upvotes: 1

Views: 11815

Answers (4)

Momen_nasser
Momen_nasser

Reputation: 39

Meak video size bigger than container and hide overflow

.container{
  width: 60rem;
  height: 28rem;
  overflow: hidden;

  position: relative;
  video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-53%, -50%);
    width: 60rem;
    height: 42rem;
  }
}

Upvotes: 0

True2D
True2D

Reputation: 21

I think it's not a border, try with outline.

video{ outline: 0px; }

Upvotes: 2

Davide Ungari
Davide Ungari

Reputation: 1960

I'm not sure if I understood, anyway I think you could play a little bit with CSS. I made a container smaller than the video to hide black "borders" in this example http://jsfiddle.net/ungarida/w9qkv2oc/ http://jsfiddle.net/ungarida/w9qkv2oc/2/

html, body {
   padding: 0;
   margin: 0;
   background-color: #efefef;
}
#container {
   padding: 0;
   margin: 0;
   height: 300px;
   width: 580px;
   background-color: white;
   display: block;
   overflow: hidden;
   position: relative;
}

video {
   padding: 0;
   margin: 0;
   width: 600px;
   position: absolute;
   top: -40px;
   left: -10px;
}

Upvotes: 1

Gustaf Gun&#233;r
Gustaf Gun&#233;r

Reputation: 2267

A quick and dirty fix:

video{
    left: -1px;
}

Upvotes: 2

Related Questions