Mobile Issue – Video Post Not Displaying Correctly

Tagged: , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #63375
    alexlisowski_dci
    Participant

    Hi there, thank you for the theme, it’s great. One issue I have is that when someone is on their phone and you click through to the video post, you only see half of the video or less (the rest of it is offscreen). Is there a fix to this or is this theme not designed for video? Happy to upgrade to pro if that fixes it.
    You should be able to see the issue here if you view it through a phone.
    Thanks again

    #63449

    Hi there,

    We will fix this in next version update.
    Meanwhile, login to your WP Dashboard and go to Appearance > Customize > Additional CSS and paste the below custom css code:

    .wp-block-embed {
    	position: relative;
    }
    .wp-block-embed.wp-embed-aspect-1-1 .wp-block-embed__wrapper,
    .wp-block-embed.wp-embed-aspect-1-2 .wp-block-embed__wrapper,
    .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper,
    .wp-block-embed.wp-embed-aspect-18-9 .wp-block-embed__wrapper,
    .wp-block-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper,
    .wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper,
    .wp-block-embed.wp-embed-aspect-9-16 .wp-block-embed__wrapper {
    	position: relative;
    	display: block;
    	width: 100%;
    	padding: 0;
    	overflow: hidden;
    }
    .wp-block-embed.wp-embed-aspect-1-1 .wp-block-embed__wrapper:after,
    .wp-block-embed.wp-embed-aspect-1-2 .wp-block-embed__wrapper:after,
    .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper:after,
    .wp-block-embed.wp-embed-aspect-18-9 .wp-block-embed__wrapper:after,
    .wp-block-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper:after,
    .wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper:after,
    .wp-block-embed.wp-embed-aspect-9-16 .wp-block-embed__wrapper:after {
    	display: block;
    	content: "";
    	clear: both;
    }
    .wp-block-embed.wp-embed-aspect-1-1 .wp-block-embed__wrapper iframe,
    .wp-block-embed.wp-embed-aspect-1-2 .wp-block-embed__wrapper iframe,
    .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper iframe,
    .wp-block-embed.wp-embed-aspect-18-9 .wp-block-embed__wrapper iframe,
    .wp-block-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper iframe,
    .wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper iframe,
    .wp-block-embed.wp-embed-aspect-9-16 .wp-block-embed__wrapper iframe {
    	position: absolute;
    	top: 0;
    	right: 0;
    	bottom: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;
    }
    .wp-block-embed.wp-embed-aspect-1-1 .wp-block-embed__wrapper:before,
    .wp-block-embed.wp-embed-aspect-1-2 .wp-block-embed__wrapper:before,
    .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper:before,
    .wp-block-embed.wp-embed-aspect-18-9 .wp-block-embed__wrapper:before,
    .wp-block-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper:before,
    .wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper:before,
    .wp-block-embed.wp-embed-aspect-9-16 .wp-block-embed__wrapper:before {
    	content: "";
    	display: block;
    }
    .wp-block-embed.wp-embed-aspect-1-1 .wp-block-embed__wrapper:before {
    	padding-top: 100%;
    }
    .wp-block-embed.wp-embed-aspect-1-2 .wp-block-embed__wrapper:before {
    	padding-top: 200%;
    }
    .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper:before {
    	padding-top: 56.25%;
    }
    .wp-block-embed.wp-embed-aspect-18-9 .wp-block-embed__wrapper:before {
    	padding-top: 50%;
    }
    .wp-block-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper:before {
    	padding-top: 42.85%;
    }
    .wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper:before {
    	padding-top: 75%;
    }
    .wp-block-embed.wp-embed-aspect-9-16 .wp-block-embed__wrapper:before {
    	padding-top: 50%;
    }

    Thank you!

    #63453
    alexlisowski_dci
    Participant

    Amazing. Thank you so much!

    #63604

    Welcome anytime @alexlisowski_dci 🙂

    #74344
    renatogloriadeus
    Participant

    My site has the same problem, but my site already has this standard code inside it, without adding, but it doesn’t work, what can it be?

    https://somosinvenciveis.com.br

    #74397

    Hi @renatogloriadeus,

    We checked your Site but we found no issue in your site. Could you please explain more about the issue that you are facing.

    Thanks

    #74418
    renatogloriadeus
    Participant

    Segment or link https://somosinvenciveis.com.br/cine-sara-play/ of a post when placing the link on Youtube is disproportionate is not responsive neither PC nor cell phone

    #74464

    Ok we think you have directly used the embedded code. Please wrap the embedded code with the class ’embed-responsive’ and ’embed-responsive-16by9′.

    Example

    <div class="embed-responsive embed-responsive-16by9">
      (Paste your embedded code here)
    </div>

    Please paste the embedded code as mentioned above.

    OR

    If you are using the WordPress 5+ then you can use the Embeds Block Features of Gutenberg on the page/post editor page which will be very easy to use the embedded code with out any HTML code customization.

    Thanks

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.