Please Help! Video width in Mobile web version is too wide (Debut Theme)

Tourist
17 0 1
Highlighted
Explorer
63 13 17

Probably you have statically provided iframe within product.liquid - find and adjust width and height of the iframe:

 <iframe src="{% there should be some - don't touch it :) %}" width="400" height="400"></iframe>
Thanks for reading, don’t forget to like and subscribe!
Wrong outro - Click Like and Accept as Solution if it was helpful and help other to find the answer ?
0 Likes
Tourist
17 0 1

Hello, Yurii. I don't have any <iframe line in my product.liquid file

This is how my product liquid file looks like:

 

 

{% comment %}
The contents of the product.liquid template can be found in /sections/product-template.liquid
{% endcomment %}

{% section 'product-template' %}
{% section 'product-recommendations' %}

{% if collection %}
<div class="text-center return-link-wrapper page-width">
<a href="{{ collection.url }}" class="btn btn--secondary btn--has-icon-before return-link">
{% include 'icon-arrow-left' %}
{{ 'products.product.back_to_collection' | t: title: collection.title }}
</a>
</div>
{% endif %}

<script>
// Override default values of shop.strings for each template.
// Alternate product templates can change values of
// add to cart button, sold out, and unavailable states here.
theme.productStrings = {
addToCart: {{ 'products.product.add_to_cart' | t | json }},
soldOut: {{ 'products.product.sold_out' | t | json }},
unavailable: {{ 'products.product.unavailable' | t | json }}
}
</script>

{% assign current_variant = product.selected_or_first_available_variant %}

<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Product",
"name": {{ product.title | json }},
"url": {{ shop.url | append: product.url | json }},
{%- if product.featured_image -%}
{%- assign image_size = product.featured_image.width | append: 'x' -%}
"image": [
{{ product.featured_image.src | img_url: image_size | prepend: "https:" | json }}
],
{%- endif -%}
"description": {{ product.description | strip_html | json }},
{%- if current_variant.sku != blank -%}
"sku": {{ current_variant.sku | json }},
{%- endif -%}
"brand": {
"@type": "Thing",
"name": {{ product.vendor | json }}
},
"offers": [
{%- for variant in product.variants -%}
{
"@type" : "Offer",
{%- if variant.sku != blank -%}
"sku": {{ variant.sku | json }},
{%- endif -%}
"availability" : "http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}",
"price" : {{ variant.price | divided_by: 100.00 | json }},
"priceCurrency" : {{ cart.currency.iso_code | json }},
"url" : {{ shop.url | append: variant.url | json }}
}{% unless forloop.last %},{% endunless %}
{%- endfor -%}
]
}
{% include 'addthis' %}
</script>

 

0 Likes
Tourist
6 0 1

hi @Case

 

Where do you insert the video link? Did you insert it just as a link or entered the <iframe> code somewhere? 

0 Likes
Tourist
17 0 1

Hi, wtmedia!

 

I simply pasted an iframe code on my product page. <iframe src="my-video-file-link.mp4" width="800" height="800"></iframe>. Works fine on desktop.

0 Likes
Tourist
6 0 1

hi @Case

 

You can try <iframe src="my-video-file-link.mp4" width="100%" height="800"></iframe> instead.

1 Like
Tourist
17 0 1

Thank you, wtmedia! It really worked, however there was too much black extra space above & bellow video frame itself in mobile version, so I adjusted the height option to "330". Desktop version looks smaller now, but mobile version is a priority for me.

0 Likes