When designing a webpage with text and images, it's important to consider the layout on different screen sizes. To avoid text wrapping under images, adjusting the spacing around the image is sometimes necessary.
Similarly, when embedding a video, centering it on the screen can be a challenge. If there isn't enough text above the video, it may not be centered properly. This can be seen in the screenshot https://i.sstatic.net/xMbnt.jpg
Ensuring that the video is always centered, regardless of the amount of text, can be tricky. The length of the text may vary for different languages, and adjusting the image border for each language is not ideal.
Below is an example of HTML code:
<div class="Section">
<img src="http://www.jthink.net/songkong/images/classical.png" class="section_image align_left"/>
<h2>Understands Classical</h2>
<p>SongKong understands Classical music. The Metadata demands for Classical are very different to Pop/Rock music, credit is usually given to not only the performer but also the
conductor, orchestra and composer. In Pop/Rock an album usually represents the artistic intent of the artist, i.e. the album was conceived
and created as a single body of work. In Classical it is more complicated, Classical composers work in terms of Symphonies or Sonatas
rather than albums, we call these Works. These works comprise sub works or movements, and there may be additional levels. When Classical music is released as an album it may only contain part of a
work, or conversely multiple works, so the album grouping may not be the most important grouping.
SongKong identifies Classical releases and captures this additional information in dedicated metadata fields.
It can also identify other Classical information such as the Opus No and the performers with their instruments. SongKong can automtically update the new iTunes Work and Movement fields.
</p>
<div class="videowrapper">
<iframe src="https://www.youtube.com/embed/6Es-eaG4xPg" name="Classical and iTunes" allowfullscreen></iframe>
</div>
</div>
And the corresponding CSS:
.section_image {
height: auto;
}
.Section {
clear:both;
padding-top:50px;
padding-bottom:50px;
}
.align_left {
float:left;
margin-right:20px;
clear:both;
}
.align_right {
float:right;
margin-left:20px;
clear:both;
}
.videowrapper iframe {
margin: 0 auto;
display:table;
width: 500px;
height: 300px;
}