You must Sign In to post a response.
  • Category: Web design

    Embedding YouTube videos in website responsively


    Need to embed a YouTube video on your website and make it responsive? Is it possible to make a responsive YouTube embed script? A free tutorial lesson can be taken from the responses below to know the correct procedure to do so.

    I want to know the best method to embed YouTube videos responsively in my webpages. By default, YouTube video embed scripts are not responsive.

    Is there any trick by which I can decrease the page load time? I know that webpage has to download CSS, JavaScript and images just to show video player on webpage. How to get rid of such downloading and make website page more responsive?
  • #8905
    Mukhtar,

    Your question is a bit confusing. Are you talking about the "Responsive" design, in which the units adapts its dimensions according to the form factor? For example, if the embed script is placed in a desktop browser, it should display it in a pretty big size but when the page is displayed in a mobile screen, the video should appear without having to scroll. That's called responsive design. By default, the YouTube video embed scripts are not responsive.

    In the second part of your question, you are talking about loading of page elements to make the page load and respond quickly. That's not really part of responsive design but is more like a page optimization.

    Please clarify your question.

  • #8910
    The default embed code of Youtube takes time to load on the webpage. Here is way to quickly load Youtube videos on blog responsively. The will reduce the page size by 300-400 KBs. Just visit the reference link.

  • #10943
    Embedding the best method you can do to share on your websites. Of course, You cannot download and upload on your on your server which is a big waste of time and space. This only overload your server and makes the video loading slow. So, best solution is to embed on your website.

    For responsive video, you need to do is just a little more css. So, you get your embedded video link from youtube. In your website, you need to put the < iframe > inside a div tag as below.

    < div class="video-container" >
    < iframe src="http: //www . youtube.com/embed/dFVxGRekRSg" frameborder="0" width="560" height="315" >< /iframe >
    < /div>

    So, your < iframe >is inside a div of class "video-container". Now, to make it responsive, add the below css code inside your head section.
    < style>
    .video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
    }

    .video-container iframe,
    .video-container object,
    .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }
    < /style>

    Please remove the space after < in the above code. After this, you get fully responsive embedded video of youtube on your site. Enjoy !!!


  • Sign In to post your comments