Oct 4, 2023
How to fix the problem of 'video outside of viewport' (before they were not when I published them)?
This question is locked and replying has been disabled.
Community content may not be verified or up-to-date. Learn more.
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
All Replies (10)
You can use the
lazyloading attributeThe
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.
Dec 3, 2023
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
Nov 27, 2023
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
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.
Oct 18, 2023
Nov 2, 2023
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
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
<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
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.
Dec 1, 2023
Nov 27, 2023
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