• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

PAHOMPU.COM

Info Teknologi Blog SEO dan Bisnis Online

  • Blogging & SEO
    • Themes
    • Script
  • Teknologi
    • Komputer
    • Mobile & App
  • Internet
  • Sosial Media
  • Other
    • Bisnis Rumahan
    • Bisnis Online
    • Ulasan Bisnis
    • Motivasi
Home / Script / Cara Untuk Membuat Embed Video Responsive Di Wordpress

11 February 2017 by pahompu Leave a Comment

Cara Untuk Membuat Embed Video Responsive Di WordPress

Terkadang kita ingin mengembed suatu video dalam post di wordpress. Bisa…!, tetapi kemudian permasalah timbul ketika laman di buka di perangkat mobile yang memilki layar kecil. Untuk mengatasi masalah ini maka kita harus membuat video embed tersebut menjadi responsive atau lebarnya akan menyesuaikan lebar layar pada perangkat pembuka.

Untuk Membuat Embed Video Di WordPress Menjadi Responsive

Untuk Membuat Embed Video Di WordPress Menjadi Responsive, anda cukup melakukan sedikit perubahan pada template wordpress blog anda saja

1. Tambahkan Script berikut functions.php template:

/*  Add responsive container to embeds
/* ------------------------------------ */ 
function alx_embed_html( $html ) {
    return '
' . $html . '
'; } add_filter( 'embed_oembed_html', 'alx_embed_html', 10, 3 ); add_filter( 'video_embed_html', 'alx_embed_html' ); // Jetpack

2. Dan berikutnya, tammbahkan CSS yang akan membuatnya responsif pada style.css:

.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed, .video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

Itu saja! Anda sekarang telah membuat iframe, objek, embed dan video (HTML5) elemen responsif. Responsif CSS akan selalu menampilkan video dengan aspek rasio 16: 9.

Kode ini juga akan bekerja dengan Jetpack embeds.

referensi : alxmedia.se

Filed Under: Script

Related Posts

  1. Template WordPress Gratis Anew, Klasik Responsive
  2. Template WordPress Gratis POINT, Full SEO dan Responsive Terpopuler
  3. Cara Membatasi Jumlah Huruf Dalam Judul Postingan Di WordPress
  4. Template WordPress Gratis Deadline, Responsive dan Fokus
  5. Template WordPress Gratis Hueman, Free Responsive Rasa Premium
  6. Cara Menonaktifkan Emoji Atau Emoticons di Blog WordPress
  7. Bagaimana Membuat URL secara otomatis bisa diklik di Postingan WordPress
  8. Cara Membuat Galeri Gambar Di WordPress

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

POPULAR POSTS

  • Mengapa Kita Harus Mematuhi Rambu Lalu Lintas? posted on 13 November 2017
  • Ini Dia, Cara Mengukur Suhu Ruangan Dengan iPhone ! Ini Dia, Cara Mengukur Suhu Ruangan Dengan iPhone ! posted on 11 March 2017
  • 5 Control Panel Web Hosting Paling Top Dan Sering Di Pakai 5 Control Panel Web Hosting Paling Top Dan Sering Di Pakai posted on 11 April 2017
  • Cara Menghapus Riwayat Pembelian di App Store posted on 8 January 2017
  • Kendala Yang Sering Dihadapi Saat Mengelola Sebuah Web Hosting Kendala Yang Sering Dihadapi Saat Mengelola Sebuah Web Hosting posted on 29 March 2020
  • Apa itu Hello Dolly WordPress Plugin, Haruskah Saya Menghapusnya? posted on 20 June 2017
  • Daftar Anti Virus Terbaik Untuk Windows 10 Ini 5 Keunggulan Windows 10 yang Perlu Diketahui posted on 30 November 2016

Recent Posts

  • 7 Reliable Email Advertising and Marketing Approaches to Produce More Sales 29 August 2021
  • 6 Elemen Penting dalam Strategi Pemasaran Digital 18 November 2020
  • 9 Halaman Penting Ini Harus Ada Pada Website Bisnis Kamu 29 October 2020
  • Lima Faktor Peringkat SEO Dasar yang Harus Anda Ketahui 21 July 2020
  • Kendala Yang Sering Dihadapi Saat Mengelola Sebuah Web Hosting 29 March 2020
  • Mending Mana? Beli Laptop atau Rakit PC? 4 February 2020
  • Cara Membuat Teks Warna Warni di Insta Story 23 January 2020

Recent Comments

  • Hartono Liem on Lima Faktor Peringkat SEO Dasar yang Harus Anda Ketahui
  • cotekno on Lima Faktor Peringkat SEO Dasar yang Harus Anda Ketahui
  • Komala maulana on 4 Langkah Mudah Cara Bisnis Online Di Internet
  • Roffif Syafruddin on Cara Menghapus Riwayat Pembelian di App Store
  • Roffif Syafruddin on Mending Mana? Beli Laptop atau Rakit PC?

Tags

android aplikasi Applikasi bisnis Bisnis Online blog blogging Custom Background Custom Colors Custom Menu Entertainment facebook Featured Images game Google Adsense internet iphone komputer Laptop Left Sidebar mobile Money Online News One Column online plugin Right Sidebar SEO smartphone Sticky Post teknologi template terbaik Theme Options Threaded Comments tips Tips dan Trik Translation Ready trik trik wordpress Tutorial Wordpress Two Columns windows Windows 10 wordpress
  • About
  • Contact Us
  • Privacy Policy
  • Disclaimer
  • Term Of Services
  • Subscribe Us

Copyright © 2022 · Gen Polos on Genesis Framework · WordPress · Log in