it-swarm-id.com

Menambahkan radius batas untuk video YouTube yang disematkan

Silakan lihat biola ini . Pemberitahuan langsung sebelum memuat border-radius berfungsi dengan baik. Beberapa milidetik kemudian sudut bundar menghilang.

Bagaimana cara menambahkan sudut bundar ke video YouTube yang disematkan?

15
Randomblue

Anda hanya perlu mengatur gaya perbatasan Anda:

border:20px solid #000;

http://jsfiddle.net/jalbertbowdenii/AkPXj/20/

15
albert

Ini sangat sederhana menggunakan CSS3. Yang kalian lewatkan adalah z-index yang memainkan polisi buruk.

Lihat kode di bawah ini, saya membungkus pemain dalam sebuah div, mengatur tinggi dan lebar sesuai keinginan saya, mengatur overflow menjadi tersembunyi dan z-indeks sesuai kebutuhan. Jari-jari perbatasan bekerja sangat mengagumkan!

.player {
  border-radius: 10px;
  overflow: hidden;
  z-index: 1;
  height: 320px;
  width: 480px;
}
<div class="player">
<iframe width="480" height="320" src="https://www.youtube.com/embed/aiegUzPX8Zc" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>
6
Sibidharan

Untuk membuat tampilan sudut bulat, Anda harus membuat empat overlay divs yang terlihat seperti sudut bulat dan posisikan di setiap sudut. Sama sekali bukan solusi yang elegan, tapi itu satu-satunya cara untuk menciptakan efek itu.

5
Nate B

Contoh untuk mendapatkan sudut bulat di video youtube atau apa pun, seperti iframe atau tag img.

<div style="
width: 560px;
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); /*ios 7 border-radius-bug */
-webkit-transform: rotate(0.000001deg); /*mac os 10.6 safari 5 border-radius-bug */
-webkit-border-radius: 10px; 
-moz-border-radius: 10px;
border-radius: 10px; 
overflow: hidden; 
">
<iframe width="560" height="315" src="http://www.youtube.com/embed/ZM0e1m9T9HQ" frameborder="0">
</iframe>
</div>
4
dirkdigital

Jika Anda diizinkan, coba embed/objek langsung (terbaik dengan swfobject atau sesuatu) dan wmode = transparan atau wmode buram (disukai)

http://jsfiddle.net/AkPXj/19/

3
yunzen

Pada awalnya browser memperlakukannya seperti elemen blok lainnya dan menerapkan radius perbatasan. Kemudian objek flash selesai memuat dan hanya berjalan di atas, karena tidak ada cara untuk menggunakan jari-jari perbatasan pada objek flash, mereka menghilang.

3
472084

Sayangnya, membulatkan sudut-sudut video Flash yang tertanam seperti YouTube dan Vimeo cukup menantang karena perbedaan antara browser yang lebih lama.

Jika semua pengguna akhir Anda menjalankan browser yang mendukung HTML5, maka cukup tambahkan player=html5 ke alamat iframe seperti: http://www.youtube.com/embed/QKh1Rv0PlOQ?rel=0&player=html5. Ini akan memaksa browser mereka untuk memuat versi HTML5 dari video, dan border-radius akan berfungsi dengan baik.


Jika beberapa browser pengguna akhir Anda jangan mendukung HTML5, maka segalanya mulai menjadi jelek.

Solusi Anda yang paling elegan berikutnya akan seperti yang disarankan Ivijan-Stefan, yaitu untuk mengatasi setiap browser secara terpisah dan membuang tag !important pada setiap elemen, mungkin ditambah dengan menambahkan wmode=transparent ke alamat iframe seperti: http://www.youtube.com/embed/QKh1Rv0PlOQ?rel=0&wmode=transparent.

Ini akan memberi Anda kompatibilitas versi versi peramban tambahan, sehingga Anda mungkin dapat berhenti pada saat ini.


Bagi kita yang perlu mendukung berbagai browser lama (Internet Explorer 6, ada?), Namun, satu-satunya secara konsisten cara yang dapat diandalkan untuk melakukan ini adalah dengan membuat gambar yang terlihat seperti sudut melengkung, dan menggunakan salinan gambar ini untuk menutupi setiap sudut video. (Ini juga memerlukan trik wmode=transparent yang saya jelaskan di atas, karena beberapa pelaku terburuk akan menampilkan gambar sudut di bawah video!)

Berikut adalah contoh teknik ini yang diterapkan pada video YouTube iframe-: http://jsfiddle.net/skywalkar/uyfR6/ (contoh radius = 20px)

Catatan: Jika Anda membuat sudut overlay terlalu besar (lebih dari ~ 20px), maka mereka akan menutupi kontrol pemain!
Untuk meminimalkan efek dari masalah ini, Anda dapat mencoba memotong sudut dengan memutar gambar hingga 45 derajat. Ini memerlukan serangkaian overlay dan penggunaan margin secara kreatif, tetapi mungkin sepadan dengan masalah jika Anda memerlukan radius sudut yang lebih besar: http://jsfiddle.net/skywalkar/BPnLh/ (misalnya radius = 30px)

2
RobotZombieLord

Ini hanya mungkin dengan mode HTML5 diaktifkan untuk pemutar youtube.

Demo di sini: http://jsfiddle.net/3f9DB/1/

0
user1012851

Anda dapat membungkus iframe seperti ini: http://jsfiddle.net/xmarcos/D4sS7/

0
xmarcos

Inilah "solusi hack" yang mudah namun sangat praktis dan bermanfaat untuk masalah yang menantang ini.

Sematkan iframe Anda di elemen "div" seperti ini:

  <div>
   <iframe allowfullscreen="" frameborder="0" height="445" player="html5"scrolling="no" src="https://www.youtube.com/embed/DCTwJJhQFy8"   width="780"></iframe>
  </div>

lalu tambahkan css berikut ke HTML Anda:

 div {
   position: relative;
   display:inline-block;
   margin:200px;
}
div:before {
    content: '';
    position: absolute;
    z-index: 5000;
    display: block;
    top: -27px;
    left: -27px;
    right: -27px;
    bottom: -27px;
    background-color: transparent;
    pointer-events: none;
    border: 30px solid white;
    border-radius: 50px;
}][1]

Ini adalah solusi yang cukup fleksibel, meskipun menggunakan beberapa lapisan tambahan untuk radius batas. Metode ini juga kompatibel dengan sebagian besar (semua) browser modern. Semoga bermanfaat.

0
user6123836