Bạn có muốn thêm đường viền khung khung nội tuyến quanh video của mình không? Gần đây, một người dùng yêu cầu chúng tôi thêm một đường viền xung quanh các video của họ trong WordPress. Vì bạn có thể sử dụng cả khung nội tuyến và oEmbed để thêm video trong WordPress, chúng tôi sẽ chỉ cho bạn cách thêm đường viền khung nội tuyến xung quanh video nhúng cũng như làm thế nào để thêm một đường viền xung quanh các hình ảnh oEmbed trong WordPress.
Thêm đường viền Iframe Video trong WordPress
Điều đầu tiên bạn cần làm là mở một bài đăng hoặc trang chứa mã nhúng video khung nội tuyến của bạn. Một mã nhúng khung nội tuyến điển hình phải giống như sau:
Bạn có thể thêm một đường viền quanh nó bằng cách thêm kiểu nội tuyến vào mã như sau:
Đơn giản chỉ cần thay đổi chiều rộng của đường viền cũng như màu sắc, và bạn đã hoàn tất.
Trong khi thêm khung giáp làm việc, có một cách tốt hơn để thêm một đường viền quanh các video trong WordPress. Đó là bằng cách sử dụng oEmbed.
Thêm biên giới quanh oEmbed Video trong WordPress
WordPress đi kèm với hỗ trợ oEmbed tích hợp. Về cơ bản WordPress cho phép bạn dán liên kết của video, và nó sẽ tự động nhận được mã nhúng cho họ. Bây giờ điều này chỉ làm việc cho các trang web được kích hoạt oEmbed như YouTube, Vimeo, DailyMotion, Hulu, vv (Xem: làm thế nào để dễ dàng thêm video trong WordPress sử dụng oEmbed)
Bây giờ bạn đã biết làm thế nào để thêm một đoạn video với oEmbed, đây là cách bạn có thể thêm một đường viền xung quanh oEmbed video trong WordPress.
Khi thêm video bằng oEmbed, chỉ cần gói URL vào thẻ khoảng bằng các thông số kiểu đường nội tuyến, như sau:
http://www.youtube.com/watch?v=qzOOy1tWBCg
Nếu bạn muốn thêm một đường viền giống nhau xung quanh tất cả các khung hình video, thì tốt nhất bạn nên thêm một lớp CSS vào biểu định kiểu của chủ đề.
.frame-border {
biên giới: 3px solid #EE;
}
Bây giờ bạn có thể sử dụng lớp CSS trong mã nhúng iframe của bạn như sau:
Bạn cũng có thể sử dụng cùng một lớp CSS trong thẻ khoảng quanh các URL video oEmbed của bạn, như sau:
http://www.youtube.com/watch?v=qzOOy1tWBCg
Lợi ích của việc sử dụng một lớp CSS đơn giản là nếu bạn thay đổi các chủ đề sau đó, bạn có thể dễ dàng thay đổi màu sắc bằng một cú nhấp chuột và quay lại và chỉnh sửa từng video riêng lẻ.
Chúng tôi hy vọng bài viết này đã giúp bạn thêm đường viền khung nội tuyến quanh một video nhúng trong WordPress. Bạn cũng có thể muốn xem 9 mẹo hữu ích trên YouTube này để làm phong phú trang web WordPress bằng video.