Cara Embed Video Youtube Pada Responsive Design
- Categories:
- css
Secara default, fitur embed dari Youtube tidak mendukung responsive design.
Hal tersebut membuat saya kesulitan karena situs saya sebagian besar mendukung responsive design.
Untuk membuat video embed dari Youtube dapat tampil dengan baik pada situs yang mendukung responsive design seperti blog ini, bisa menggunakan HTML dan CSS berikut.
<!-- HTML -->
<div class="video-wrapper">
<iframe src="https://www.youtube-nocookie.com/embed/4PSh7xqnvRw?rel=0&showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
// CSS
.video-wrapper {
float: none;
clear: both;
width: 100%;
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
margin-bottom: 30px;
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Hasilnya dapat dilihat seperti berikut.
- Tags:
- #css
- #youtube
- #responsive
Recent Posts
Broken Pipe Error
My note about Broken Pipe error
Shell Script First
In this blog post, I'll explain why I prioritize shell scripting as my primary solution for automating tasks, and only turn to full-fledged programming languages like Ruby and Python when necessary.
Lessons from Creating the Unsplash Image Resizer: Simplifying Image Downloads with HTML's Download Attribute
How I discovered the download attribute and used it to improve image downloads
C# - The Difference Between string[] and List
Learn the difference between string[] and List
in C# and when to use each for storing collections of strings in your code Output Redirection - Standard Input, Standard Output, Standard Error, /dev/null
Penjelasan singkat mengenai shell piping dan /dev/null