How To Center A Webpart Video In SharePoint 2013

Are you looking to center a webpart video in SharePoint 2013? Follow these instructions to achieve the desired alignment and optimize your page layout.

To center a web part video in SharePoint 2013, you can use CSS and jQuery to modify the web part’s layout and alignment. One way to achieve this is by adding the CSS class “centerwebparts” to the web part, which sets the margins to auto. Additionally, you can use the CSS class “setwebpartwidth” to set a specific width for the web part.

If you have the jQuery library loaded, you can use the following code:

“`

.centerwebparts {
margin-left: auto;
margin-right: auto;
}

.setwebpartwidth {
width: 700px !important;
}



$(document).ready(function() {
$('[id^="WebPartWPQ"]').addClass('centerwebparts setwebpartwidth');
});

“`

If you don’t have the jQuery library, you can use the following code:

“`

.centerwebparts {
margin-left: auto;
margin-right: auto;
}

.setwebpartwidth {
width: 700px !important;
}


document.addEventListener('DOMContentLoaded', function() {
var list = document.querySelectorAll('[id^="WebPartWPQ"]');
for (var i = 0; i < list.length; i++) {
list[i].classList.add('centerwebparts', 'setwebpartwidth');
}
});

“`

Another method, specifically for the form content (New/Edit/Display forms), is to add the CSS class “centerwebparts” to the table element inside the web part. This can be done using the following code:

“`

.centerwebparts {
margin-left: auto;
margin-right: auto;
}


document.addEventListener('DOMContentLoaded', function() {
document.querySelector('[id^="WebPartWPQ"] > table').classList.add('centerwebparts');
});

“`

These methods should help you center the web part video in SharePoint 2013.

Adding CSS and jQuery to Center the Webpart Video

To center the webpart video in SharePoint 2013, you can utilize CSS and jQuery to make layout adjustments. By adding the appropriate CSS classes, you can easily modify the margins and width of the web part to achieve the desired alignment. Here’s how you can do it:

Method 1: Using jQuery Library

If you have the jQuery library loaded, you can follow these steps:

  1. Add the following CSS code within the <style> tags:

“`html

.centerwebparts {
margin-left: auto;
margin-right: auto;
}

.setwebpartwidth {
width: 700px !important;
}

“`

  1. Add the jQuery library by including the following script tag within the <head> section of your web part page:

“`html

“`

  1. Add the following jQuery code within the <script> tags:

“`html

$(document).ready(function() {
$('[id^="WebPartWPQ"]').addClass('centerwebparts setwebpartwidth');
});

“`

Method 2: Without jQuery Library

If you don’t have the jQuery library loaded, you can use the following alternative method:

  1. Add the following CSS code within the <style> tags:

“`html

.centerwebparts {
margin-left: auto;
margin-right: auto;
}

.setwebpartwidth {
width: 700px !important;
}

“`

  1. Add the following JavaScript code within the <script> tags:

“`html

document.addEventListener('DOMContentLoaded', function() {
var list = document.querySelectorAll('[id^="WebPartWPQ"]');
for (var i = 0; i < list.length; i++) {
list[i].classList.add('centerwebparts', 'setwebpartwidth');
}
});

“`

Method for Form Content

If you want to center the webpart video within form content, such as New/Edit/Display forms, you can use this method:

  1. Add the following CSS code within the <style> tags:

“`html

.centerwebparts {
margin-left: auto;
margin-right: auto;
}

“`

  1. Add the following JavaScript code within the <script> tags:

“`html

document.addEventListener('DOMContentLoaded', function() {
document.querySelector('[id^="WebPartWPQ"] > table').classList.add('centerwebparts');
});

“`

These methods should help you center the web part video in SharePoint 2013. Remember to replace [id^="WebPartWPQ"] with the appropriate ID of your web part.

Using jQuery Library or Without jQuery Library

Depending on the availability of the jQuery library in your SharePoint environment, you can choose the appropriate code example to center the webpart video. These methods utilize CSS and jQuery to modify the layout and alignment of the web part, ensuring it is centered on the page.

Using jQuery Library

If your SharePoint environment has the jQuery library loaded, you can easily center the webpart video by adding the following code snippet to your page:

Code Example
<style>
.centerwebparts {
  margin-left: auto;
  margin-right: auto;
}

.setwebpartwidth {
  width: 700px !important;
}
</style>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
  $(document).ready(function() {
    $('[id^="WebPartWPQ"]').addClass('centerwebparts setwebpartwidth');
  });
</script>

This code snippet adds the CSS classes “centerwebparts” and “setwebpartwidth” to the web part, which centers it horizontally and sets a specific width of 700 pixels.

Without jQuery Library

If you do not have the jQuery library loaded, you can use the following code snippet to achieve the same result:

Code Example
<style>
.centerwebparts {
  margin-left: auto;
  margin-right: auto;
}

.setwebpartwidth {
  width: 700px !important;
}
</style>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var list = document.querySelectorAll('[id^="WebPartWPQ"]');
    for (var i = 0; i < list.length; i++) {
      list[i].classList.add('centerwebparts', 'setwebpartwidth');
    }
  });
</script>

This code snippet achieves the same result as the previous example but does not rely on the jQuery library. It uses JavaScript’s addEventListener function to select all web parts with an ID starting with “WebPartWPQ” and adds the necessary CSS classes.

Centering Webpart Video in Form Content

An alternative method for centering the webpart video is specifically for form content, such as New/Edit/Display forms. You can center the video by adding the CSS class “centerwebparts” to the table element inside the web part. Use the following code snippet:

Code Example
<style>
.centerwebparts {
  margin-left: auto;
  margin-right: auto;
}
</style>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('[id^="WebPartWPQ"] > table').classList.add('centerwebparts');
  });
</script>

This code snippet adds the CSS class “centerwebparts” to the table element inside the web part, effectively centering the video within the form content.

By following these methods, you can easily center a web part video in SharePoint 2013, optimizing the layout and alignment of your pages.

Centering Webpart Video in Form Content

If you need to center the webpart video within the form content, follow this method to apply the appropriate CSS class to the table element. By adding the CSS class “centerwebparts” to the table element inside the web part, you can effectively align the video within the form.

To implement this method, use the following code:

<style>
.centerwebparts {
    margin-left: auto;
    margin-right: auto;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('[id^="WebPartWPQ"] > table').classList.add('centerwebparts');
});
</script>

This code sets the margins of the table element to auto, which ensure the content is horizontally centered within the web part. Applying the “centerwebparts” class to the table element achieves this alignment.

By following this method, you can easily center the web part video within the form content in SharePoint 2013. Utilize the provided code snippet to optimize the alignment and improve the visual appeal of your web page.

Meet the Author

Abdul Rahim has been working in Information Technology for over two decades. Learn how Abdul got his start as a Tech Blogger , and why he decided to start this Software blog. If you want to send Abdul a quick message, then visit his contact page here.