WebSite X5Help Center

 
Paul W.
Paul W.
User

Making embedded iframe content responsive  en

Autor: Paul W.
Visitado 3468, Followers 1, Compartido 0  

When I embed video in x5 using iframe with the set width attribute some of the iframe disappears on the smaller screens. Everything else is responsive except the video. Is there a setting? A code?

Help please.

Thank you

Paul

Publicado en
8 RESPUESTAS - 3 úTIL - 1 CORRECTO
Paul M.
Paul M.
Moderator

Hello Paul,

To do this you would need to place the iframe holding the video within its own responsive container.

Here is an example, using the video currently embedded in your homepage at https://jpw.ca  -  all the code below should be inserted in the same HTML Code Object.

HTML Code tab:

<div class="responsive-container">

<iframe src="https://www.youtube.com/embed/-3aoHMROojA?rel=0" width="560" height="315" allowfullscreen>

</iframe>

</div>

Expert tab (CSS Code):

.responsive-container {

position: relative;

padding-bottom: 56.25%;

padding-top: 35px;

height: 0;

overflow: hidden;

}

.responsive-container iframe {

position: absolute;

top:0;

left: 0;

width: 100%;

height: 100%;

}

I also recommend enabling 'Automatic Height' in the HTML Code Object properties, as well as deselecting the checkbox marked 'Show scrollbars'.

Kind regards,

Paul

Leer más
Publicado en de Paul M.
Paul W.
Paul W.
User
Autor

Hi Paul,

Thank you for getting back to me.

How do I set the responsiveness so that the videos retain their height and width ratio?

Leer más
Publicado en de Paul W.
Paul M.
Paul M.
Moderator

You can change this segment of the iframe HTML from:

width="560" height="315"

to:

width:100% height:100%

Is that what you mean, Paul...  is that the effect you would like to achieve?

NB: you will probably need to refresh your browser/clear the cache to see the difference...

Leer más
Publicado en de Paul M.
Paul W.
Paul W.
User
Autor

Is there a code to the spacific ratio of a video 16:9 appplied to the video settings width="560" height="315"

so that it adjusts like everything else does to screen size?

Leer más
Publicado en de Paul W.
Paul W.
Paul W.
User
Autor

Hi Paul

I used the code on the page and as you can see, it works https://www.jpw.ca/

I put the css code under expert on each page that has a video 

.videoWrapper {

                position: relative;

                padding-bottom: 56.25%; /* 16:9 */

                padding-top: 25px;

                height: 0;

}

.videoWrapper iframe {

                position: absolute;

                top: 0;

                left: 0;

                width: 100%;

                height: 100%;

}

And then the individual html code for each video.

<div class="videoWrapper">

 <iframe src="https://www.youtube.com/embed/-3aoHMROojA?rel=0" width="560" height="349" allowfullscreen=">

 </iframe>

 </div>

Is there a place I could put the css code once so it would apply to all videos on the site?

Paul

Leer más
Publicado en de Paul W.
Paul M.
Paul M.
Moderator
Paul W.
Is there a place I could put the css code once so it would apply to all videos on the site?

You could insert it in Step 4 Advanced Settings >Statistics, SEO and Code > Expert tab > Custom Code > Before closing the HEAD tag.

Put it between tags as follows:

<style type="text/css">

.videoWrapper {

                position: relative;

                padding-bottom: 56.25%; /* 16:9 */

                padding-top: 25px;

                height: 0;

}

.videoWrapper iframe {

                position: absolute;

                top: 0;

                left: 0;

                width: 100%;

                height: 100%;

}

</style>

However, I should qualify that by saying that whilst this will function, the original method is superior.  It is best to keep your CSS in external stylesheets if possible, and always advantageous to have your pages as lightweight as possible, especially when it comes to code in the head section.

Leer más
Publicado en de Paul M.
Paul W.
Paul W.
User
Autor

Thank you very much

Leer más
Publicado en de Paul W.