Need help with a CSS issue. I have 2 fields for uploading media - one for images and one for videos. I want to apply specific styling to just the video upload section. Can anyone assist me with this?
HTML:
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" *ngFor="let media of medias; let i = index">
<div class = "type-img" [hidden]= "selectedImage !='img'">
<img class="cat-img" src="{{media.image_path}}" style="width: 100px;margin: 10px 0px;" type='img' *ngIf="selectedImage=='img'" />
</div>
<div class = "type-video" [hidden]= "selectedImage !='video'" >
<video width="320" height="240" controls> <source src="{{media.image_path}}" type="video/mp4" *ngIf="selectedImage=='video'" ></video>
</div>
<p class="inputimg video">
<input type="file" name="{{media._id}}[i]" id="{{media._id}}[i]" class="inputfile" (change)="editPinImage($event,media)" style='display: none;' />
<label *ngIf="media._id" for="{{media._id}}[i]" class="img_change">Change</label>
<label *ngIf="!media._id" for="{{media._id}}[i]" class="img_change">Add</label>
</p>
<div class = "type-video" [hidden]= "selectedImage !='video'" >
<span style="margin-left: 12%;">or </span>
<input type="text" class="form-control form-textbox input-text" (change)="editPinImage($event,media)" style="width: 28%;margin-right: 24%;">
</div>
</div>
In the code snippet <p class="inputimg video">, the following CSS applies specifically to videos:
.video {
float: right;
margin-right: 56%;
margin-top: -2%;
}