Thủ thuật căn giữa video khi nhúng từ Youtube/Vimeo trên Wordpress

center-youtube-embed-696x349.png

Đây là vấn đề không mấy quan trọng, có vẻ như là một điều rất nhỏ, nhưng có rất nhiều bạn gửi mail và inbox mình trên Facebook và cả trên diễn đàn Designervn.Net. Và để trả lời với các bạn hôm nay tôi sẽ hướng dẫn bạn trong bài viết sau.

Cách để căn giữa mã nhúng video:

Theo mặc định trong WordPress khi bạn dán URL của video YouTube nó sẽ sử dụng mặc định tính năng nhúng của WordPress . Nhưng bạn vẫn có thể kiểm soát mã nhúng của mình bằng các bước sau:

Bước 1

Nếu bạn click vào một video trên YouTube, bạn có thể lấy các mã “Nhúng” như bên dưới.

Screen-Shot-2016-10-30-at-9.07.52-PM-copy-300x105.png

Bước 2

Trong trình soạn WordPress của bạn, bạn nhấp vào tab “Text” để bạn có thể chèn mã.

text-mode-wordpress-768x122-300x48.png


Bước 3

Dán mã nhúng vào trình soạn thảo WordPress. Thí dụ:

Mã:
<iframe width="560" height="315" src="https://www.youtube.com/embed/844u_tYqIvI" frameborder="0" allowfullscreen></iframe>

Theo mặc định, nó có thể xuất hiện như thế này đây. Như bạn có thể thấy nó không phải là trung tâm. Bạn có thể tăng độ rộng nhưng rất nhiều lần bạn muốn nó để phù hợp với dòng chảy của hình ảnh trung tâm khác của bạn mà có nhiều khả năng không phải toàn màn hình hoặc toàn bộ chiều rộng.


Bước 4

Để canh giữa mã nhúng, bạn chỉ cần thêm một DIV vào nó và căn giữa nội dung text-align. Dưới đây là mã mới.

Mã:
<div style="text-align: center;"><iframe src="https://www.youtube.com/embed/9hgiAfrb2NA" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>


Và bây giờ những gì nó trông giống như dưới đây là. Bây giờ bạn có một video YouTube một cách hoàn hảo làm trung tâm! Nhanh chóng và đơn giản.

Chúc bạn thành công.

Trương Hào/Biên tập AZTut.com và Designervn.Net
 
  • Thẻ Thẻ
    thiết kế web wordpress youtube
  • Gợi ý cho bạn

    DesignerVN là chuyên trang cung cấp thông tin dành cho cộng đồng Designer, nhà thiết kế Việt Nam. Thư viện font chữ, tài nguyên thiết kế đa dạng.
    Back
    Bên trên