WebSite X5Help Center

 
Giulio V.
Giulio V.
User

Youtube Embedded Video Does Not Resize At Lower Resolutions  en

Autor: Giulio V.
Visited 715, Followers 2, Udostępniony 0  

I embedded the YouTube video code on my page and It is perfect on desktop resolutions but does not rescale in size on lower resolutions - mobile devices.

Has anyone successfully fixed this issue? As I check this on Google I found suggestions to add additional code to the embed code I got from YouTube.

I find this very confusing and tried several times to to add code but with No success at all.

If someone can lead me to a solution will be very appreciated.

I would need explict information in a step by step format on how to resolve this issue. 

This is the video embed code from YouTube.

<iframe width="853" height="480" src="https://www.youtube.com/embed/dKA4UZYPKYY" title="GYSPOT PRO 230" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

I understand there needs to be additional code wrapped around this to make it scale properly at different resolutions. Please I need simplified step by step help with this, How What and Where to place the code. 

Here is the website page with the embedded video, it works well on desktop but does not resize on mobile resolutions. https://prolinesystems.net/gyspot%20pro%20230%20steel%20dent%20puller.html

This is the You Tube Video embed code.

<iframe width="853" height="480" src="https://www.youtube.com/embed/dKA4UZYPKYY" title="GYSPOT PRO 230" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

I am a Novice when it comes to code, so please be detaild in what and how needs to be done.

Thank you for your assistance. Giulio

Posted on the
10 ODPOWIEDZI - 1 POMOCNY
Daniel W.
Daniel W.
User
Najlepszy Użytkownik miesiąca EN

In the "Video and Audio" object you can paste the YouTube video address that you copied from the browser address bar and the YouTube videos should adapt to small screens.

On my test page, videos are integrated into the page in various ways and number 2 uses the "Video and Audio" object, see

>> https://findelinks.de/123shop-hosteurope/contacts.php

Czytaj więcej
Posted on the from Daniel W.
Claudio D.
Claudio D.
Moderator
Najlepszy Użytkownik miesiąca IT

@Giulio, try this:


<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
<iframe style="position: absolute; top:0; left: 0; width: 100%; height: 100%;" src="https://www.youtube.com/embed/dKA4UZYPKYY?rel=0" title="GYSPOT PRO 230"  frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Czytaj więcej
Posted on the from Claudio D.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

x Giulio V. ... (It > En)  ... I saw your page "prolinesystems.net and the YT video works correctly with opening in the ShowBox, both on my PC and on my SmartPhona Android+Chrome...
...I didn't notice any scaling problems...
.
ciao

.

Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪
Giulio V.
Giulio V.
User
Autor

Hi Cladio, How and Where exactly do I paste the code you provided? I tried similar code yesterday and it would not scale down the video on mobile resolutions. Am I pasting it the wrong place?

It actually made a mess of things by pushing the page off center and not showing the full screen of the Video. So I had to remove the code and replaced it like I previously had it as a Jpeg with the link to the you tube video which scales down fine. 

But this defeats the purpose of embedding the You Tube code of the Video on my page, instead of just a link to the youtube video..

Hi KolAsim said everything looks like it is working well on PC and mobile, that is because he viewed it after I removed the embed code and changed it back to a jpeg with the link to the You Tube Video.

I saw something on you Tube that you have to make a frame around the Youtube code with additional code to make it rescale. Mindboggling.

Daniel's suggestion is similar to what I already do that is just a link to the video, but I need to embed the video code and have it scale properly on all resolutions.

Gentlemen, Thank you for helping me to get this resolved.

PS: I heard some rumors that Google will be implementing SGE very shortly and many are saying it will hurt a lot of websites. Anyone have any information about this?

Czytaj więcej
Posted on the from Giulio V.
Claudio D.
Claudio D.
Moderator
Najlepszy Użytkownik miesiąca IT
Giulio V.
Hi Cladio, How and Where exactly do I paste the code you provided? I tried similar code yesterday and it would not scale down the video on mobile resolutions. Am I pasting it the wrong place?

paste in an HTML object.
similar does not mean the same wink

Czytaj więcej
Posted on the from Claudio D.
Daniel W.
Daniel W.
User
Najlepszy Użytkownik miesiąca EN

For the “Video and Audio” object, the user simply enters the YouTube video address, but the WebSiteX5 program adds a special code in the background - so it is more than a link.

Czytaj więcej
Posted on the from Daniel W.
Daniel W.
Daniel W.
User
Najlepszy Użytkownik miesiąca EN

Input into the "Video and Audio" object and the Javascript code generated by WebSite X5.

----- WebSite X5 -----

----- Javascript code -----

Czytaj więcej
Posted on the from Daniel W.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Giulio V.
... ... ...  Hi KolAsim said everything looks like it is working well on PC and mobile, that is because he viewed it after I removed the embed code and changed it back to a jpeg with the link to the You Tube Video. ... ... ... ... 

(It > En)  ... I checked your link again...
...now you have used the Video Object, and it works correctly in the same cell, both on the PC and on my SmartPhome...wink
... the only inconsistency, which seems already known to me, is that the mobile zoom only works in the horizontal position...cool
...
... another idea that might interest you, very simple, you could use the YT video as the background of the line...
.

ciao

.

Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪
Giulio V.
Giulio V.
User
Autor

Hi KolAsim

Thank you for the reply, could you explain a bit more about your quote.

"another idea that might interest you, very simple, you could use the YT video as the background of the line...

Thank you...

Czytaj więcej
Posted on the from Giulio V.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

ciao ... ... put a single cell in the row, and extend both the row and the cell to full width...
.... in the cell put a transparent image, like the one I attach here in 800x450 (16:9)...
... the video will therefore have a full-width background of the line in a rational ratio...

> ...transparent PNG image, both visible here, and also as an attached file below: >>

-------------------------------------------

ciao

.

Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪