﻿/*

    <div class="TruPlaceEmbedded"><iframe class="TruPlaceEmbedded" src="https://tour.TruPlace.com/property/1037/30413/?Banner=0&MoveWindow=0"></iframe></div>

    
    http://alistapart.com/article/creating-intrinsic-ratios-for-video/

    http://www.smashingmagazine.com/2014/02/making-embedded-content-work-in-responsive-design/

    Setting the position to relative lets us use absolute positioning for the iframe itself, which we’ll get to shortly.
The padding-bottom value is calculated out of the aspect ratio of the video. In this case, the aspect ratio is 16:9, which means that the height will be 56.25% of the width. For a video with a 4:3 aspect ratio, we set padding-bottom to 75%.
The padding-top value is set to 30 pixels to allow space for the chrome — this is specific to YouTube videos.
The height is set to 0 because padding-bottom gives the element the height it needs. We do not set the width because it will automatically resize with the responsive element that contains this div.
Setting overflow to hidden ensures that any content protruding outside of this element will be hidden from view.
We also need to style the iframe itself. Add the following to your style sheet:
.video-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}
This targets iframes inside containers with the .video-container class. Let’s work through the code:
Absolute positioning is used because the containing element has a height of 0. If the iframe were positioned normally, we would have given it a height of 0 as well.
The top and left properties position the iframe correctly in the containing element.
The width and height properties ensure that the video takes up 100% of the space used by the containing element (which is actually set with padding).


*/

div.TruPlaceEmbedded,
#embed_wrap_truplace {
    position: relative;
    padding-bottom: 75%;
    height: 0;
    overflow: hidden;
}

iframe.TruPlaceEmbedded,
#embed_truplace {
    border: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (max-width: 767.98px) and (orientation: portrait) {
    div.TruPlaceEmbedded,
    #embed_wrap_truplace {
        padding-bottom: 150% !important;
    }
}