How do I embed a responsive video in a post or page that does not use the built in ProPhoto responsive video widget?

You are here:
  • KB Home
  • ProPhoto 6
  • How do I embed a responsive video in a post or page that does not use the built in ProPhoto responsive video widget?
< Back

If you are wanting to have a responsive video appear in your content area or on a blog post you will need to use a service such as embedresponsively, use a plugin, or the custom css code below.  I personally use the custom css code below and find it works perfectly.

You will want to place the custom css code inside of the ProPhoto 6 Customizer, select the “Base” template.  Once you are in the “Base” template click on the “gear” top left that is next to the word “TEMPLATE”, then select the “Advanced” tab and place the code below into the Custom Css area.

custom css

.video-responsive{ 

overflow:hidden; 

padding-bottom:42.5%; 

position:relative; 

height:0; } 


.video-responsive iframe, .video-responsive object, .video-responsive embed{ 

left:0; 

top:0; 

height:100%; 

width:100%; 

position:absolute; 

background: transparent !important; } 

The Custom CSS Code above once placed into the “Base” template of your site with then be available to use on any future layouts or templates that you create, since the children of the “Base” inherit this custom CSS.

Next you will need to place the code below into your post or page editor.  Be sure to select the “TEXT” tab (top right of the editor screen, next to the “VISUAL” tab)  then past the code below.

Replace this part of the code with your own embed code you get from Youtube, Vimeo, etc.

<iframe src=”https://player.vimeo.com/video/80064303?color=ffffff&amp;title=0&amp;byline=0&amp;portrait=0″ frameborder=”0″>

embed code





<div class="video-responsive">


<iframe src="https://player.vimeo.com/video/80064303?color=ffffff&amp;amp;title=0&amp;amp;byline=0&amp;amp;portrait=0" frameborder="0"></iframe>

</div>




Menu