How to Embed YouTube Video Frame Responsively

Now it is very easy to embed any YouTube Video Frame into your Website or Blog (WordPress, Blogger, Wix or any) fully responsively that supports any devices of any scale.

Now it is very easy to embed any YouTube Video Frame into your Website or Blog (WordPress, Blogger, Wix or any) fully responsively that supports any devices of any scale.
Responsive  YouTube Video IMAGE

Here are 3 Steps to Embed YouTube Video Responsively 

  1. Put the following CSS in your Theme/Template File.
    .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    And save your Theme.
    In Blogger, Go to Dashboard -> Theme -> Edit HTML and search for  ]]></b:skin> and put the above CSS before it.
    In WordPress, Go to Dashboard -> Theme -> Editor and open style.css file. Next put the above CSS.
  2. Now copy the Following HTML tag and put it in your targeted post/page where you want to show responsive YouTube Video.
    <div class="embed-container">
    <iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/2DG3pMcNNlw"></iframe></div>
    

    Just change the YouTube video ID.

    Example, I am going to make this video ( https://www.youtube.com/watch?v=uXfJc8up6cM ) responsively embedded.

    So the final code would be
    <div class="embed-container">
    <iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/uXfJc8up6cM"></iframe></div>
    
    This is my responsive YouTube embed video.
  3. Now save your page or post and publish it. 
Promotion

সব ধরণের চাকরির বিজ্ঞপ্তি ও নিউজ পেতে ক্লিক করুন

BD Job Vacancy