Quality Criterias      Speed of Web      Contact Us      
Embed YouTube videos with Videos offer excellent opportunities to illustrate texts and enliven the pages. There are many cases, when information, like product introductions, testimonials, instructional materials etc. , which look really great and are usable in video format. At same time, other important qualities, like loading time, are objectively measurable Embed YouTube videos with responsive code
fastest

websites

in Birmingham

Embed YouTube videos with responsive code

Videos offer excellent opportunities to illustrate texts and enliven the pages. There are many cases, when information, like product introductions, testimonials, instructional materials etc., which look really great and are usable in video format.

To insert YouTube videos to webpages, follow these steps:

  • Go to the desired video page in YouTube and click "Share" button
  • Open "Embed" dialogue for setting video size and format
  • Write appropriate width, 635 pixels, into the field "Custom Width"
  • Copy the embed code "iframe width=..." from the text area.

The illustration shows where you find "Share" button and "Embed" dialoque.

Embed YouTube videos with responsive code
"Embed" button is located under video screen.
Embed YouTube videos with responsive code
Click on "Embed" dialog, modify width of video and copy the code.

 

2. Go to your website and insert code snippet there

  • Go to the page on your website where you would like to insert the video
  • Open the text editing dialogue and click the button "HTML".
  • Insert the video code that you copied from YouTube, and save.
Embed YouTube videos with responsive code

Embedding videos is a great way to enliven your pages. A good thing about embedding videos, which are originally hosted in YouTube, is that even with increasing popularity you do not need to worry about possible limitations on your server disk space or bandwidth use.

The major problem occurs, when you are looking website with smartphones or other smaller screens, which show narrower view, than the video width. That is why you need slightly modified version of embed code.

 

Responsive layout

For making video width more flexible, you need to use following code, which has also outer container. Just rembember to change video embed url:

 

<p> </p>
<p style="position: relative; padding: 30px 0px 57% 0px; height: 0; overflow: hidden;"><iframe src="https://www.youtube.com/embed/421aTJI2Nxc" width="100%" height="100%" frameborder="0" style="display: block; margin: 0px auto; position: absolute; top: 0; left: 0;"></iframe></p>
<p> </p>

 

And this code results flexible video, as seen here. Feel free to change browser window width to see how video changes the size proportionally.

 

 

 

Testing Responsive Layout CSS Styles

You may certainly open your website with some smartphone or tablet or smaller laptop, but the chance is, that you will not be able to see how your layout css responds to all different screen widths. Good way to emulate exact pixel wise screen widths on your desktop computer is to open "Mobile view" in your browser.

 

Embed YouTube videos with responsive code

Mobile View Emulations

All modern browsers have built-in functionalities for emulating small screens. In Mozilla Firefox, you need to use just shortcut Shift+Ctrl+M to open mobile view. In Google Crome, in is needed to open "Developers Tools" with Shift+Ctrl+I at first and then it is possible to open mobile view with shortcut Shift+Ctrl+M.

 

On mobile view you have options to drag screen width easily on pixel wise or choose particular devices from dropdown list. There is also possible to switch from portrait mode to landscape mode to see how page layout changes if it is viewed in different modes without reloading the page. 

 

Read also these articles
How fast is your site? Check here.
Ask a Quote for website design.

Fast Websites
Nobody likes slow website. For building fast web, you need solid and reliable website platform. Important is to host site to fast UK Web hosting server.

Web Hosting
We tested many UK Web Hosts and measured error rate and speed of web hosting servers. For reliable results, see UK web hosting firms we suggest.

Disclosure
All UK Web Hosting companies are independent firms, with own terms and conditions as well as privacy policies. Some UK Web Hosts stipend us.

Ask a Quote
Ara Website Design Ltd., 11477099,
Fastest Websites in Birmingham
For Website Design, Ask a Quote or
send us e-mail.

Web Solutions araweb.co.uk

Embed YouTube videos with

To insert YouTube videos to webpages, follow these steps: Go to the desired video page in YouTube and click "Share" button Open "Embed" dialogue for setting video size and format Write appropriate width, 635 pixels, into the field "Custom Width" Copy the embed code "iframe width= Videos offer excellent opportunities to illustrate texts and enliven the pages. There are many cases, when information, like product introductions, testimonials, instructional materials etc., which look really great and are usable in video format.

Embed YouTube videos with responsive code

www.araweb.co.uk © 2017 Ara Website Design Ltd. » Maker of Fast Websites