[openupmusicParticipant]

hi there, I am trying to wrap some text around an iFrame, with the iFrame aligned to the right. I am trying to use the following code, entered into a text field:

<iframe class="myiframe" src="https://player.vimeo.com/video/139982719" align: right; width: 390px; height:225px; allowfullscreen="allowfullscreen"></iframe>

Unfortunately the iFrame still displays as full width. Any help would be appreciated.

[ZeshanMember]

Hi there,

Thanks for writing in! To assist you with this, we’ll first need you to provide us with your URL as stated on the forum entrance page. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you.

In the meantime, please try this iframe html:

<iframe class="myiframe" src="https://player.vimeo.com/video/139982719" align: right; width: 390px; min-width: 0; height:225px; allowfullscreen="allowfullscreen"></iframe>

Thanks!

[openupmusicParticipant]

Hi there, unfortunately that didn’t work. The page can be found here http://openupmusic.org/swoyo/

[JackKeymaster]

Hi there,

Thanks for writing back, try adding the following CSS under “customize > Custom > CSS”.

.entry-content embed, .entry-content iframe, .entry-content object {
max-width: 100%;
width: 65% !important;
float: right;
}

Thank you! 🙂

[openupmusicParticipant]

Hi there, this is looking much better, thanks! 2 more quick questions:

1) is there a way to add padding around the side of the iframe to keep the text away a little?

2) is there a way to get the iframe to change size dynamically when the webpage resizes? I’m trying height: auto; at the moment which is helping.

Thanks for all the help!

[ZeshanMember]

Hi there,

#1: To add padding, please add following CSS under Custom > CSS in the Customizer:

@media (min-width: 768px) {
    iframe.myiframe {
        margin-left: 20px;
    }
}

#2: Regretfully not. However, you can use following CSS code to display video on mobiles like this: http://prntscr.com/8rng2r

@media (max-width: 767px) {
    iframe.myiframe {
        float: none;
        width: 100% !important;
    }
}

Hope this helps. 🙂

Thank you!

[Author]

Posts