Responsive Youtube Embed


Source: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php


<div class="videoWrapper">
    <!-- Copy & Pasted from YouTube -->
    <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>
 
.videoWrapper {
 position: relative;
 padding-bottom: 56.25%; /* 16:9 */
 padding-top: 25px;
 height: 0;
}
.videoWrapper iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

Comments

Post a Comment

Popular posts from this blog

Laravel Reverb + Echo naming convention.

   Echo listen() function relies on a very exact and weird naming convention, something to do with Namespaces: If the php Event name is "ChatMessageSent" then Echo knows how to listen to that event as:     Echo.private('chats').listen('ChatMessageSent', (e) => {         console.log('New chat message', e);     }); But if we have a broadcastAs() method in the event class:     public function broadcastAs(): string     {         return 'chat.message.sent';     } Then Echo doesn't know how to listen to chat.message.sent event. Instead, you have to put a dot before the event name: .chat.message.sent Echo.private('chats').listen('.chat.message.sent', (e) => {       console.log('New chat message', e); });    
Read more