Ask Experts » Blogging and Websites » Web design »

Embedding YouTube videos in website responsively


Date: 17 Apr 2015   Posted By: Mukhtar     Group: Blogging and Websites    Category: Web design   

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?


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.


Author: Tony John    26 Apr 2015      Member Level: Diamond     Points : 2  (Rs 2)    Voting Score: 0

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.


Author: Muddassir    26 Apr 2015      Member Level: Diamond     Points : 2  (Rs 2)    Voting Score: 0

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.

Reference: http://www.labnol.org/internet/light-youtube-embeds/27941/

Author: vijay kumar rana    13 Jan 2016      Member Level: Silver     Points : 13  (Rs 13)    Voting Score: 0

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 !!!





Post Answer



You must Sign In to post a response.


Post Answer        





Related Questions
  • Return to Question Index
  • Ask Question to Experts


  • Top Contributors
    Today
      Last 7 Daysmore...