Working with Iframes

Working with Iframes. Under some cases we might want to embed a Youtube Video in Our Website . well YouTube provide  HTML code, which enable the User to copy and embed Youtube video into website.

These few lines of short HTML Code is call Iframe.

In this article we will Step into how to embed the Iframe into our Website via HTML and CSS.

Lets Dive into the Code to see how to embed Iframe Code

Before I proceed Diving into embedding Iframe. There is something important that we need to keep in mind in order to make our video Responsive. Well in our CSS Styling there should always be 2 Separate Styling  , the 1st styling is when the site is on display at Desktop Mode,while the second Styling is when the site is on display under  mobile mode.

Thus we need to restyle all the Classes related under the “@media screen and (max-width: 680px)” to make it looks nicely display when the site is being displayed under mobile mode.

1. Create a Column inside the Row Section and create a class under the div tag to contain the Iframe HTML Code.

             <div class="col-6" class="rightside">
                
                <div class="videocontainer">
                
                  <iframe width="560" height="315" src="https://www.youtube.com/embed/pqEx_DBGZOg" frameborder=
                   "0" gesture="media" allow="encrypted-media" allowfullscreen>
                 </iframe>
                
                </div>
           
            </div>
          

2. Style the iframe inside the @media query parentheses to make it mobile friendly . Style Width of the column to 100%, so it will appear 100% width in Mobile mode.Set the Iframe position to relative so it will not move around when the user interact with it.and set the width of the iframe to 100% , to appear full width in mobile mode.

          .col-6{
        
                width:100%;
                margin: 0;
                }
    
         .leftside{
        
               margin:auto;
        
        
              }
    
        .rightside{
        
            margin:auto;
        
        
              }
    
    
   
    
    .videocontainer iframe{
        
                         position:relative;
                         width:100%;
                         margin:5px;
                         overflow:hidden;
        
                       }
        

 
Well that wrap up the article on Working with Iframes, I found this link quite helpful , if you want to learn more about building site , check out here
Learn how to create Mobile Responsive Nav Bar over here