WordPress.org

Support

Support » Themes and Templates » [Resolved] Size of embedded videos on static page

[Resolved] Size of embedded videos on static page

  • Gratianne
    Member

    @gratianne

    Hi all,

    I’ve been struggling to find a solution to my problem :
    I put 2 videos next to each other on my home page (lower part, above footer) using a Word table. The first video is a Vimeo, and the other one is from Dailymotion.

    My problem is that even with the same settings, one is way bigger than the other.

    Here is my code :

    <table border="0" cellspacing="0" cellpadding="0">
    <tbody>
    <tr>
    <td style="text-align: left;" valign="top" width="307"><a href="http://vimeo.com/72336455">Beach Rugby à Saint-Palais-sur-mer, le 2 août 2013</a><iframe src="//player.vimeo.com/video/72336455?color=ffffff" height="437" width="437" allowfullscreen="" frameborder="0"></iframe></td>
    <td style="text-align: left;" valign="top" width="307"><a href="http://www.dailymotion.com/video/xy3kea_match-des-legendes-robert-pires_sport?search_algo=2">British & Irish Vs French Legends, Londres, le 22 février 2013</a><iframe src="http://www.dailymotion.com/embed/video/xy3kea?logo=on&highlight=120172" height="435" width="435" frameborder="0"></iframe></td>
    </tr>
    </tbody>
    </table>

    Can anyone help me to get the 2 videos to be the same size???

    Thanks in advance

    [Moderator Note: Please ensure that you are embedding links correctly in your posts.]

Viewing 5 replies - 1 through 5 (of 5 total)
  • WPyogi
    Forum Moderator

    @wpyogi

    Using a Word table is horrible coding practice…I’d suggest using divs and CSS.

    That said, this CSS is affecting that video size:

    .fluid-width-video-wrapper iframe, .fluid-width-video-wrapper object, .fluid-width-video-wrapper embed {
        height: 50%;
        left: 0;
        position: absolute;
        top: 0;
        width: 50%;
    }

    Gratianne
    Member

    @gratianne

    Thanks for the reply WPyogi.
    I’ve just added your CSS code to my Custom CSS and it didn’t change anything. Where did I go wrong?

    I’m sorry but I’m quite the beginner…

    WPyogi
    Forum Moderator

    @wpyogi

    That code I posted is CAUSING that video to be reduced to 50%. Start by removing that Word table – as you can see (try resizing the browser), tables don’t work well at all on responsive sites.

    Try this instead – using the TEXT editor:

    <div class="video-div">
       put your video code in here
    </div>
    
    <div class="video-div">
       put your second video code in here
    </div>

    Then add this to custom CSS:

    .vido-div {
        float: left;
        width: 45%;
        min-width: 400px;
        margin: 5px;
    }

    That’s a starting point – let’s see how it looks.

    Gratianne
    Member

    @gratianne

    Thank you so much !!
    I indeed had this code in my Custom CSS and now that it’s gone the videos have the same size.

    I have to confess that now that it’s looking good I’m a bit concerned about taking away the table but I’m going to try anyway.

    Thanks again!!

    Gratianne
    Member

    @gratianne

    WPyogi : sorry to be a pain, but I just tried the “div class” technique and unfortunately the second video gets huge (full screen) so I went back to the table for now…

    Do you have any idea why it’s not working as it should?

    Thanks again for your help

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘[Resolved] Size of embedded videos on static page’ is closed to new replies.