Embeded Youtube Video

Hi Daria,

Delete everything from your tab from the text tab, switch to the visual tab, and try pasting just the youtube URL (e.g. https://www.youtube.com/watch?v=s8Jd9OfyzAs) into your tab. WordPress should auto-embed it.

It can be finicky sometimes – you may need to paste the URL a few times or switch between text and visual.

Let me know if that works.

Cheers,
Kevin.

Kevin,
I pasted the link in tab in visual: https://www.youtube.com/watch?v=s8Jd9OfyzAs and it show me video on backend …
refresh the page F5 – no video
press F12 in Firefox to see what happened – video appears …

again refresh page with F5 – no video

heh, strange …

how can I change video height and width?

Hi Daria,

Weird – I’m seeing the same thing (video shows when I hit F12). As I said, the auto-embeds can be finicky. I’d mess with it for a minute to see if you can get it working.

Styling for iframes is never good but this will change the height and width:

div#tab-video iframe {
    width: 75% !important;
    height: 500px !important;
}

Hi Kevin,

this resolved the problem, I suppose that video was very big and do not apeared.
However, right now is another problem, because of this css video is not responsive, and also I wood like to align it on a middle (center).
How could I do this? Writing css media?

Thank you.

Hi Daria,

To align it, try changing the margin of the <p> that the video is contained in, like this:

div#tab-video p {
    margin-left: 25%;
    margin-right: auto;
}

For responsive, use media queries as you said. This will keep the video at 100% width (no margin) for screen sizes below 1000px.

@media ( max-width: 1000px ) {

    div#tab-video p {
        margin-left: auto;
        margin-right: auto;
    }

    div#tab-video iframe {
        width: 100% !important;
        height: 500px !important;
    }
}

Hi Kevin,
the problem is resolved,
thank you so much.
Post my code here if somebody need.

/*change video iframe setting in woocomerce custom tab*/

div#tab-video iframe {
width: 65% !important;
height: 450px !important;
}

div#tab-video p {
margin-left: 25%;
margin-right: auto;
}

@media ( max-width: 1300px ) {

div#tab-video p {
margin-left: 15%;
margin-right: auto;
}

div#tab-video iframe {
width: 75% !important;
height: 500px !important;
}
}

@media ( max-width: 1000px ) {

div#tab-video p {
margin-left: auto;
margin-right: auto;
}

div#tab-video iframe {
width: 100% !important;
height: 500px !important;
}
}

@media ( max-width: 700px ) {

div#tab-video iframe {
width: 100% !important;
height: 400px !important;
}
}

@media ( max-width: 480px ) {

div#tab-video p {
margin-left: 2%;
margin-right: auto;
}

div#tab-video iframe {
width: 100% !important;
height: 300px !important;
}
}

Brilliant. You’re very welcome Daria. Best of luck with your website ??