Помогите с кодом YouTube

[bumbic]

Вставляю видео в описание карточки товара, но в мобильной версии сайта видео постоянно обрезается. (шаблон Ava Store)

Поиски решения привели на сайт embedresponsivelyточкаcom который как раз помогает адаптировать видео под разные разрешения. 

При использовании кода с этого генератора в мобильной версии наконец то стало корректно отображаться, но вот на компьютере видео отображается в максимальном размере, хотелось бы ограничить его максимальные размеры, например не более 580х360. Надеюсь понятно объяснил проблему... Вот код:

<style>.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%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//93hl0k_etlI' frameborder='0' allowfullscreen></iframe></div>

 

[kentkent17]

Решит пробу css @media и адаптивная верстка.

[kentkent17]

На ютубе наберите: адаптивная верстка.

Работы на 5 мин, задайте изначальную разметку и вперед адаптировать под размеры экрана. 

[bumbic]

В 03.02.2017 в 15:59, kentkent17 сказал:

На ютубе наберите: адаптивная верстка.

Работы на 5 мин, задайте изначальную разметку и вперед адаптировать под размеры экрана. 

Спасибо за наводку, но никак не получается... я не программист ни разу)

Не могли бы подсказать что именно нужно поправить?

Вот кусок кода где встречается  @media:

@media screen and (max-width: 1227px) {

	.product-info > .left + .right {
width: 290px;
    float: left;
	}

	.product-info > .left {

	}



}

@media screen and (max-width: 1200px) {

	.product-info > .left {
width: 100%;
		border-bottom: 1px solid #ccc;
    margin: 0 0 10px 0;
	}

	.product-info > .left + .right {
	width: 100%;
	}



}

@media screen and (max-width: 760px) {
	.product-info .left {
	overflow: hidden;
		margin: 0 !important;
		padding: 0 0 10px 0;
	}

	.share_product {
		float: left;
		    width: 100%;
    height: 35px;
    position: relative;
    overflow: hidden;
	}

	.product-info .image {
		max-width: 100%;
	}

	.product-info .image .sale {
		    right: 0;
    top: 0;
	}

	.utl-mobile .uptl_container-share {
		position: relative !important;
	}

	.uptl_toolbar.uptl_toolbar_simple.__utl-reset.uptl_toolbar_share {
		max-width: 235px;
    margin: 0 auto;
	}

	.category-details {
		    padding: 10px 10px 10px 13px;
	}

	.product-info .image-additional {
		margin: 0 auto;
    float: none;
	}

	.product-info .inforight {
		display: none !important;
	}

	.product-info .description {
		padding: 10px 5px 10px 0px;
	}

	.product-info .price {
		    padding: 2px 0px;
	}

	.product-info .cart {
		padding: 10px 0px;
	}

	.opt_block {
		padding: 0 2px;
	}

	.fastorder_btn {
padding: 0;
	}

	.vblock {
max-width: 33%;
}

	.variantproducts .vbox {
		max-height: 104px;
	}

}

@media screen and (max-width: 470px) {

	.htabs a {
		width: 38%;
    float: left !important;
    display: block !important;
    clear: none;
	}

	.product-info .cart-inside {
		width: 280px !important;
	}

	.vblock  div {
		max-width: 100%;
	}

}

.product-info .inforight {
	display: none;
}

.vblock {
	float: left;
	    -webkit-transition: .5s ease 0s;
    -moz-transition: .5s ease 0s;
    -o-transition: .5s ease 0s;
    transition: .5s ease 0s;
	margin-bottom: 10px;
}

.product-info .cartbutton.nullTvr .button {

}

.centerbg1 {
  display: none;
  width:100%;
  height:100%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1000;
  background: url('/design/im/texture1.jpg') #1750B3;
}

.centerbg2 {
  position: absolute;
  left: 50%;
  top: 50%;
}

#preloader {
  top: -50%;
  left: -50%;
  position: relative;
  width: 333px;
  height: 26px;
  background: url('/content/pages/articles/preloaders/bg2.gif');
  border: solid #edda3d 2px;
}

.vbox .all {
    display: block;
    line-height: 1em;
    width: 100%;
    text-align: right;
    clear: both;
    color: #1750B3;
	text-decoration: none;
	position: absolute;
    right: 15px;
    bottom: 0;
}

.vbox.lish {

}

.vbox .all:hover {
	cursor: pointer;
}

.variantproducts .vbox:last-child {

}

.variantproducts .vbox:last-child .vblock:first-child, .variantproducts .vbox:last-child .vblock:nth-child(2), .variantproducts .vbox:last-child .vblock:nth-child(3) {
	display: block !important;
	visibility: visible !important;
}