How to make youtube videos responsive?

Learn how to Autosize youtube videos for mobile devices

Today we are going to go over how you can make your youtube videos responsive to your website. First, you will need a website to make your videos responsive. We personally need our youtube videos to be responsive to our tutorial videos and for our custom t-shirt commercials to easily go on our website. Youtube videos are embed iframes and currently, there is no code that you can implement to change them without changing your CSS. 

Some websites are different then others and some websites have templates that are custom. You have different platforms to choose from such as Word press, Magento, Opencart, Shopify and more. With this code, you will be able to copy and paste it to the bottom of your CSS Page. If you have a custom template or are using WordPress there may be a spot for custom CSS code.

If you are using Journal theme on OpenCart then you will find that you can enter your code easy also

• Go to setting inside Journal Theme
• Go down to custom code
• Click CSS
• Paste your code

Here is the code that is needed to turn your youtube videos responsive. Just copy and paste

/* Youtube video mobile */
@media (max-width: 750px) {
iframe {
 max-width: 100%;
 height: 165px;
}
}
@media (min-width: 768px) {
iframe {
 max-width: 100%;
 height: 250px;
}
}
@media (min-width: 992px) {
iframe {
 max-width: 100%;
 height: 335px;
}
}
@media (min-width: 1200px) {
iframe {
 max-width: 100%;
 height: 360px;
}
}

If you have any more questions or suggestions please feel free to list them below.