صفحه‌ای که درخواست کرده‌اید، درحال حاضر به زبان شما در دسترس نیست. می‌توانید با استفاده از قابلیت ترجمه داخلی Google Chrome، فوراً هر صفحه وبی را به زبان موردنظرتان ترجمه نمایید.
Oct 4, 2023

How to fix the problem of 'video outside of viewport' (before they were not when I published them)?

One is my latest blogpost with youtube video, but it's not indexed as it show error of video outside of viewport. And there are some more videos published previously show the same error. But when I published them couple of years ago there was no indexing problem but why this happened now. How can I fix them? 
Locked
This question is locked and replying has been disabled.
Community content may not be verified or up-to-date. Learn more.
Recommended Answer
Oct 5, 2023
Google constantly changes. Now, for video search results, to be eligible the video has to be visible on the page when it first loads.

So, if you want to get in video search results, move your video up the page so that people can see it when the page first loads.


Original Poster Saravjeet Sandhu marked this as an answer
Helpful?
All Replies (10)
Oct 4, 2023
Hello Saravjeet Sandhu,

You can use the lazyloading attribute

The lazyloading attribute can be used to defer the loading of videos until they are within the viewport of the user. This can help to improve the page load time and reduce the amount of data that needs to be loaded. To use the lazyloading attribute, simply add it to the <video> tag. For example:

<video lazyloading="true" src="my-video.mp4"></video>

---- or

You can use a JavaScript library

There are a number of JavaScript libraries that can be used to load videos outside of the viewport. One popular library is called Intersection Observer. To use Intersection Observer, you would first need to add a script tag to your page that references the library. Then, you would need to add a JavaScript snippet to your page that uses Intersection Observer to load the videos when they are within the viewport.

----- or

Use a server-side solution

You can also use a server-side solution to resolve the "video outside of viewport" error. One way to do this is to use a video transcoding service to create multiple versions of your videos at different resolutions. You can then use a server-side script to deliver the appropriate video to the user based on their device and screen size.
Nov 14, 2023
Have I currently uploaded a video that I'm not aware of 
Dec 3, 2023
If youtube iframe placed to <noscript> tag as fallback to lazyload script, google always show "Video is to Tall" not depend is styles or height attributes set or not.
Recommended Answer
Oct 5, 2023
Google constantly changes. Now, for video search results, to be eligible the video has to be visible on the page when it first loads.

So, if you want to get in video search results, move your video up the page so that people can see it when the page first loads.


Original Poster Saravjeet Sandhu marked this as an answer
Google user
Oct 30, 2023
https://support.google.com/webmasters/thread/237795154?hl=en&msgid=237822036
Nov 27, 2023
It spoils the text of a blog if you move a video to the top where it may be out of context with whatever the text is describing. I like to slot appropriate videos in where they fit with what I am talking about. Of course, I can move videos to the top of a blog but I can't see how this improves anything. 
Oct 17, 2023
  • Resize video embed: Reduce video width/height until within webpage borders.
  • Use CSS: Set iframe width to 100% and height to auto
  • Use server-side solution: Create multiple video versions at different resolutions and deliver appropriate video based on device/screen size.
  • Use Intersection Observer API: Load video when it is in the viewport.
Oct 18, 2023
Hello Saravjeet,

This issue means your video is not fully visible on the viewport (the content that you see on the device without scrolling left-right). Please check the page where video is used on a smartphone and check if that video is completely visible on the device. If it does not, please make the video size dynamic (based on percentage) instead of fixed. 

If you found this answer helpful, please click on the upvote button below.
Nov 1, 2023
That doesn't fix the bug
Oct 18, 2023
You need to set the width and height of the video to 100% i.e width=100% height=100% so that the video will not go outside the user viewport.
Nov 1, 2023
That doesn't fix the bug...
Nov 2, 2023
After the last two core updates, I see a strong correlation on my page between deindexed pages and pages that include youtube content. So, to test this assumption, I deleted the youtube content and infact, the articles reappeared after 1-2 days in SERP. Can anyone confirm this behaviour. 
If yes, I am forced to ban youtube content from my page and host videos directly.  
Nov 14, 2023
It is a BUG. 100% a bug from Google. This year 2023, since early in the year, I already noticed issues with the GSC giving lots of silly false positives and saying there are issues when there were NONE.

The question is WHY?
Nov 27, 2023
Thanks for this. That it is a bug would explain a lot because my blogs were fine until recently. I have also discovered that any attempts I make to fix the problem makes it worse. I started out with 7 videos "outside the viewport" so tried resizing and moving them and now I have nine such videos according to Google. 
Nov 3, 2023
Hello everyone,

When you use 'vh' in height attributes, it can cause issues with the aspect ratio, resulting in shifting. You can find more information in the article I've written here: https://hakanarik.com/how-to-fix-the-problem-of-video-outside-of-viewport/
Last edited Nov 3, 2023
Nov 24, 2023
Where to put the pixel/percentage in wp editor for a single youtube video
Last edited Nov 24, 2023
Nov 24, 2023
@ezaz, this is a solid solution. Adding the "wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio" classes should address the 16:9 aspect ratio issue. Complete code for copy:

<figure class=”wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio”>
    <div class=”wp-block-embed__wrapper”>
       [Youtube Embed Code]
    </div>
</figure>

Thank you.
Nov 14, 2023
The issue of videos appearing outside of the viewport can be addressed by considering a few possible solutions:

1. Responsive Design: Ensure that your app or website is designed responsively, meaning it adapts to different screen sizes and resolutions. Implementing responsive design techniques, such as using CSS media queries, can help adjust the video's positioning and size based on the user's device.

2. CSS Positioning: Check the CSS positioning properties applied to the video element. The "position" property should be set to "relative" or "absolute" to allow for proper placement within the viewport. Additionally, you can use other CSS properties like "top," "left," "right," and "bottom" to adjust the video's position within the viewport.

3. Viewport Meta Tag: Ensure that the viewport meta tag is correctly set in the head section of your HTML document. The viewport meta tag allows you to control how the webpage is displayed on different devices. For example, including the following meta tag in your HTML can help ensure proper scaling and positioning:

```
<meta name="viewport" content="width=device-width, initial-scale=1">
```

4. Check CSS Overflow: Verify that the container element surrounding the video does not have CSS overflow properties set to "hidden" or "scroll." If the container has a fixed height or width and is set to "overflow: hidden," it might be causing the video to appear outside the viewport. Adjusting the overflow properties can help ensure the video remains within the visible area.

5. JavaScript Adjustments: If you are using JavaScript to manipulate the video's position or size, review your code for any potential issues. Check for any changes made to the video's CSS properties that might conflict with its visibility within the viewport.

6. Test on Multiple Devices: Ensure that you test your app or website on various devices and screen sizes to identify any specific issues related to certain devices. This will help you pinpoint any device-specific problems and make adjustments accordingly.
Nov 26, 2023
@raoof could you provide any advice beyond from what you got from a chat bot. 
Dec 1, 2023
hello, I insert 10 video in my website in page,but error Video outside the viewport.
Nov 27, 2023
Hello Saravjeet Sandhu

Did you find any solution to fix this issue of yours, i have the same issue, I have tried all the solutions mentioned in this thread but it does not seem to work,
Did you make it work by any chance,
Thanks
false
81164432123057138
true
Search Help Center
true
true
true
true
true
83844
Search
Clear search
Close search
Main menu
false