Using Embedded Video Responsive is simple. You will first need to find what you are embedding video. You need the simply copy of the URL of embedding video.In this article, We will show you how to make YouTube videos responsive in your site, using simple CSS.
YouTube Embed Code
Paste the Embed Code into your web page.
Change Embed Code
Add div around the Embed code.
Paste the Embed Code into your web page.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <iframe width="420" height="315" src="http://www.youtube.com/embed/6xisazZX9bA" frameborder="0" allowfullscreen></iframe> |
Add div around the Embed code.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="video-responsive"> | |
| <iframe width="420" height="315" src="http://www.youtube.com/embed/6xisazZX9bA" frameborder="0" allowfullscreen></iframe> | |
| </div> |
Paste the CSS Code in your Stylesheet
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .video-responsive{ | |
| overflow:hidden; | |
| padding-bottom:56.25%; | |
| position:relative; | |
| height:0; | |
| } | |
| .video-responsive iframe{ | |
| left:0; | |
| top:0; | |
| height:100%; | |
| width:100%; | |
| position:absolute; | |
| } |
0 comments:
Post a Comment